Fix/sphere (#1348)

src/components/ArrowToggle/ArrowToggle.module.scss

@@ -0,0 +1,10 @@
+.btnOpenIconArrowImg {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+  transition: 0.5s;
+
+  &Open {
+    transform: rotate(90deg);
+  }
+}

src/components/ArrowToggle/ArrowToggle.tsx

@@ -0,0 +1,17 @@
+import arrowImg from 'images/Line22.svg';
+import cx from 'classnames';
+import styles from './ArrowToggle.module.scss';
+
+function ArrowToggle({ isOpen }: { isOpen: boolean }) {
+  return (
+    <img
+      alt="img-ArrowToggle"
+      src={arrowImg}
+      className={cx(styles.btnOpenIconArrowImg, {
+        [styles.btnOpenIconArrowImgOpen]: isOpen,
+      })}
+    />
+  );
+}
+
+export default ArrowToggle;

src/components/MusicalAddress/MusicalAddress.tsx

@@ -1,5 +1,7 @@
 import { useMemo, useState, useCallback } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { Link } from 'react-router-dom';
+import { Tooltip } from 'src/components';
 import styles from './MusicalAddress.module.scss';
 import {
   DICTIONARY_ABC,
@@ -8,9 +10,6 @@ import {
   makeSound,
   cutAddress,
 } from './utils';
-import { Link } from 'react-router-dom';
-import { Tooltip } from 'src/components';
-import Pill from '../Pill/Pill';
 
 const classNames = require('classnames');
 

src/components/Table/Table.module.scss

@@ -68,6 +68,10 @@
   &.selectable tbody tr {
     cursor: pointer;
   }
+
+  &.hideHeader thead {
+    display: none;
+  }
 }
 
 // .resizer {

src/components/Table/Table.tsx

@@ -1,23 +1,21 @@
 import {
   useReactTable,
-  Column,
   ColumnDef,
   getCoreRowModel,
   flexRender,
   getSortedRowModel,
   InitialTableState,
   SortingState,
   TableOptions,
-  SortingOptions,
 } from '@tanstack/react-table';
 
+import { useEffect, useState, useCallback } from 'react';
+import cx from 'classnames';
+import { sessionStorageKeys } from 'src/constants/sessionStorageKeys';
 import styles from './Table.module.scss';
 import Loader2 from '../ui/Loader2';
 import NoItems from '../ui/noItems';
-import { useEffect, useState, useCallback } from 'react';
-import cx from 'classnames';
 import Triangle from '../atoms/Triangle/Triangle';
-import { sessionStorageKeys } from 'src/constants/sessionStorageKeys';
 import { tableIDs } from './tableIDs';
 
 const storage = sessionStorage;
@@ -53,6 +51,8 @@ export type Props<T extends object> = {
 
   // maybe temporary
   enableSorting?: boolean;
+  hideHeader?: boolean;
+  hideBody?: boolean;
 };
 
 function Table<T extends object>({
@@ -64,6 +64,8 @@ function Table<T extends object>({
   initialState,
   id,
   enableSorting = true,
+  hideHeader = false,
+  hideBody = false,
 }: Props<T>) {
   const [selected, setSelected] = useState<string | null>(null);
 
@@ -118,36 +120,39 @@ function Table<T extends object>({
         })}
         style={style}
       >
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <th
-                    key={header.id}
-                    className={cx({
-                      [styles.sortable]: header.column.getCanSort(),
-                    })}
-                    colSpan={header.colSpan}
-                    style={{
-                      width: header.column.getSize(),
-                    }}
-                    onClick={header.column.getToggleSortingHandler()}
-                  >
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    &nbsp;
-                    {header.column.getCanSort() && (
-                      <Triangle
-                        disabled={!header.column.getIsSorted()}
-                        direction={
-                          header.column.getIsSorted() === 'desc' ? 'down' : 'up'
-                        }
-                      />
-                    )}
-                    {/* <div
+        {!hideHeader && (
+          <thead className={cx({ [styles.hideHeader]: hideHeader })}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <th
+                      key={header.id}
+                      className={cx({
+                        [styles.sortable]: header.column.getCanSort(),
+                      })}
+                      colSpan={header.colSpan}
+                      style={{
+                        width: header.column.getSize(),
+                      }}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                      &nbsp;
+                      {header.column.getCanSort() && (
+                        <Triangle
+                          disabled={!header.column.getIsSorted()}
+                          direction={
+                            header.column.getIsSorted() === 'desc'
+                              ? 'down'
+                              : 'up'
+                          }
+                        />
+                      )}
+                      {/* <div
                       {...{
                         onDoubleClick: () => header.column.resetSize(),
                         onMouseDown: header.getResizeHandler(),
@@ -157,69 +162,76 @@ function Table<T extends object>({
                         }`,
                       }}
                     /> */}
-                  </th>
-                );
-              })}
-            </tr>
-          ))}
-        </thead>
-
-        <tbody>
-          {table.getRowModel().rows.map((row) => {
-            return (
-              <tr
-                key={row.id}
-                data-id={row.id}
-                className={cx({ [styles.rowSelected]: row.id === selected })}
-                onClick={(e) => {
-                  // TODO: move to tbody
-
-                  if (!onSelect) {
-                    return;
-                  }
-
-                  if (
-                    ['a', 'button', 'input'].includes(
-                      (e.target as any).tagName.toLowerCase()
-                    )
-                  ) {
-                    return;
-                  }
-
-                  const id = e.currentTarget.getAttribute('data-id');
-
-                  if (id === selected) {
-                    setSelected(null);
-                    onSelect(null);
-                    return;
-                  }
-
-                  setSelected(id);
-                  onSelect(id);
-                }}
-              >
-                {row.getVisibleCells().map((cell) => {
-                  return (
-                    <td
-                      key={cell.id}
-                      style={{
-                        width: cell.column.getSize(),
-                      }}
-                    >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </td>
+                    </th>
                   );
                 })}
               </tr>
-            );
-          })}
-        </tbody>
+            ))}
+          </thead>
+        )}
+
+        {!hideBody && (
+          <tbody>
+            {table.getRowModel().rows.map((row) => {
+              return (
+                <tr
+                  key={row.id}
+                  data-id={row.id}
+                  className={cx({ [styles.rowSelected]: row.id === selected })}
+                  onClick={(e) => {
+                    // TODO: move to tbody
+
+                    if (!onSelect) {
+                      return;
+                    }
+
+                    if (
+                      ['a', 'button', 'input'].includes(
+                        (e.target as any).tagName.toLowerCase()
+                      )
+                    ) {
+                      return;
+                    }
+
+                    const id = e.currentTarget.getAttribute('data-id');
+
+                    if (id === selected) {
+                      setSelected(null);
+                      onSelect(null);
+                      return;
+                    }
+
+                    setSelected(id);
+                    onSelect(id);
+                  }}
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <td
+                        key={cell.id}
+                        style={{
+                          width: cell.column.getSize(),
+                        }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        )}
       </table>
 
-      {isLoading ? <Loader2 /> : !data.length && <NoItems text="No data" />}
+      {hideBody ? null : isLoading ? (
+        <Loader2 />
+      ) : (
+        !data.length && <NoItems text="No data" />
+      )}
     </>
   );
 }

src/components/account/account.tsx

@@ -84,7 +84,7 @@ function Account({
     }
 
     if (address?.includes(BECH32_PREFIX_VALOPER)) {
-      return `/network/bostrom/hero/${address}`;
+      return routes.hero.getLink(address);
     }
 
     if (moniker) {

src/components/formatNumber/formatNumber.js

@@ -1,6 +1,5 @@
 import { Pane } from '@cybercongress/gravity';
-import { getDecimal } from '../../utils/utils';
-import { formatNumber } from '../../utils/search/utils';
+import { formatNumber, getDecimal } from '../../utils/utils';
 
 function FormatNumber({ number, fontSizeDecimal, currency, ...props }) {
   return (

src/components/index.js

@@ -2,10 +2,8 @@ import {
   TransactionSubmitted,
   Confirmed,
   StartStageSearchActionBar,
-  Delegate,
   ActionBarSend,
   RewardsDelegators,
-  ReDelegate,
   TransactionError,
   ActionBarContentText,
   ConnectAddress,
@@ -63,7 +61,6 @@ export {
   TransactionSubmitted,
   Confirmed,
   StartStageSearchActionBar,
-  Delegate,
   ActionBarSend,
   RewardsDelegators,
   ReDelegate,