diff --git a/src/future-hopr-lib-components/PeerInfo/index.tsx b/src/future-hopr-lib-components/PeerInfo/index.tsx index 321df066..2f44310c 100644 --- a/src/future-hopr-lib-components/PeerInfo/index.tsx +++ b/src/future-hopr-lib-components/PeerInfo/index.tsx @@ -11,9 +11,11 @@ import { generateBase64Jazz } from '../../utils/functions'; import CopyIcon from '@mui/icons-material/ContentCopy'; import LaunchIcon from '@mui/icons-material/Launch'; + interface Props { peerId?: string; nodeAddress?: string; + shortenPeerId?: boolean; } const Container = styled.div` @@ -32,8 +34,9 @@ const PeersInfo: React.FC = (props) => { const getAliasByPeerId = (peerId: string): string => { const shortPeerId = peerId && `${peerId.substring(0, 6)}...${peerId.substring(peerId.length - 8, peerId.length)}`; - if (aliases && peerId && peerIdToAliasLink[peerId]) return `${peerIdToAliasLink[peerId]} (${shortPeerId})`; - return shortPeerId; + const displayPeerId = props.shortenPeerId ? shortPeerId : peerId; + if (aliases && peerId && peerIdToAliasLink[peerId]) return `${peerIdToAliasLink[peerId]} (${displayPeerId})`; + return displayPeerId; }; const noCopyPaste = !( diff --git a/src/future-hopr-lib-components/Table/table-pro.tsx b/src/future-hopr-lib-components/Table/table-pro.tsx index 428a8606..16a40555 100644 --- a/src/future-hopr-lib-components/Table/table-pro.tsx +++ b/src/future-hopr-lib-components/Table/table-pro.tsx @@ -129,7 +129,7 @@ const STextField = styled(TextField)` interface Props { data: { [key: string]: string | number | JSX.Element; - id: string; + id: string | number; actions: JSX.Element; }[]; id?: string; @@ -325,7 +325,8 @@ export default function CustomPaginationActionsTable(props: Props) { ))} @@ -352,10 +353,12 @@ export default function CustomPaginationActionsTable(props: Props) { } const CustomTableRow = ({ + id, row, header, onRowClick, }: { + id: string; row: Props['data'][0]; header: Props['header']; onRowClick?: Function; @@ -376,6 +379,7 @@ const CustomTableRow = ({ return ( { onRowClick && onRowClick(row); }} diff --git a/src/pages/node/channelsIncoming.tsx b/src/pages/node/channelsIncoming.tsx index e4923e8e..09edaa7f 100644 --- a/src/pages/node/channelsIncoming.tsx +++ b/src/pages/node/channelsIncoming.tsx @@ -219,12 +219,12 @@ function ChannelsPage() { return { id: (index + 1).toString(), - number: parseInt(id), key: id, node: ( ), peerAddress: getAliasByPeerAddress(peerAddress as string), diff --git a/src/pages/node/channelsOutgoing.tsx b/src/pages/node/channelsOutgoing.tsx index ceea5a18..b5f99960 100644 --- a/src/pages/node/channelsOutgoing.tsx +++ b/src/pages/node/channelsOutgoing.tsx @@ -201,13 +201,13 @@ function ChannelsPage() { const peerId = getPeerIdFromPeerAddress(peerAddress as string); return { - id: index.toString(), + id: (index+1).toString(), key: id, - number: parseInt(id), node: ( ), peerAddress: getAliasByPeerAddress(peerAddress as string), diff --git a/src/pages/node/peers.tsx b/src/pages/node/peers.tsx index bd917176..e2c95c91 100644 --- a/src/pages/node/peers.tsx +++ b/src/pages/node/peers.tsx @@ -77,7 +77,7 @@ function PeersPage() { const header = [ { - key: 'number', + key: 'id', name: '#', }, { @@ -117,20 +117,37 @@ function PeersPage() { }, ]; - const noCopyPaste = !( - window.location.protocol === 'https:' || - window.location.hostname === 'localhost' || - window.location.hostname === '127.0.0.1' - ); + const peersWithAliases = (peers?.connected || []).filter(peer => aliases && peer.peerId && peerIdToAliasLink[peer.peerId]) ; + const peersWithAliasesSorted = peersWithAliases.sort((a, b) => { + if (getAliasByPeerId(b.peerId).toLowerCase() > getAliasByPeerId(a.peerId).toLowerCase()) { + return -1; + } + if (getAliasByPeerId(b.peerId).toLowerCase() < getAliasByPeerId(a.peerId).toLowerCase()) { + return 1; + } + return 0 + }); + const peersWithoutAliases = (peers?.connected || []).filter(peer => aliases && peer.peerId && !peerIdToAliasLink[peer.peerId]) ; + const peersWithoutAliasesSorted = peersWithoutAliases.sort((a, b) => { + if (b.peerId > a.peerId) { + return -1; + } + if (b.peerId < a.peerId) { + return 1; + } + return 0 + }); + + const peersSorted = [...peersWithAliasesSorted, ...peersWithoutAliasesSorted] - const parsedTableData = Object.entries(peers?.connected ?? {}).map(([id, peer]) => { + const parsedTableData = peersSorted.map((peer, index)=>{ return { - id: id, - number: parseInt(id), + id: index+1, node: ( ), peerId: getAliasByPeerId(peer.peerId), @@ -163,8 +180,8 @@ function PeersPage() { ), - }; - }); + } + }) return (