Skip to content

Commit e403940

Browse files
telestrialtelestrial
committed
feat(exlorer, design-system): move entity list components to explorer
1 parent 96ac130 commit e403940

File tree

23 files changed

+125
-71
lines changed

23 files changed

+125
-71
lines changed

‎.changeset/flat-boats-arrive.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siafoundation/design-system': minor
3+
---
4+
5+
Refactored Peerlist component.

‎.changeset/happy-monkeys-exist.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'explorer': minor
3+
---
4+
5+
Added entity components.

‎.changeset/orange-rats-smell.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siafoundation/design-system': minor
3+
---
4+
5+
Removed entity components.

‎apps/explorer/components/Address/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import {
77
TabsList,
88
TabsTrigger,
99
Tooltip,
10-
EntityList,
11-
EntityListItemProps,
1210
} from '@siafoundation/design-system'
11+
import { EntityList } from '../Entity/EntityList'
12+
import { EntityListItemProps } from '../Entity/EntityListItem'
1313
import { humanNumber } from '@siafoundation/units'
1414
import { ExplorerDatum, DatumProps } from '../ExplorerDatum'
1515
import { useMemo, useState } from 'react'

‎apps/explorer/components/AddressSkeleton/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {
44
TabsContent,
55
TabsList,
66
TabsTrigger,
7-
EntityList,
87
DatumSkeleton,
98
} from '@siafoundation/design-system'
9+
import { EntityList } from '../Entity/EntityList'
1010
import { times } from '@technically/lodash'
1111
import { ContentLayout } from '../ContentLayout'
1212

‎apps/explorer/components/Block/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
22
Badge,
33
Tooltip,
4-
EntityList,
54
stripPrefix,
65
LinkButton,
76
} from '@siafoundation/design-system'
7+
import { EntityList } from '../Entity/EntityList'
88
import { humanNumber } from '@siafoundation/units'
99
import { ExplorerDatum, DatumProps } from '../ExplorerDatum'
1010
import { useMemo } from 'react'

‎apps/explorer/components/BlockSkeleton/index.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import {
2-
Skeleton,
3-
EntityList,
4-
DatumSkeleton,
5-
} from '@siafoundation/design-system'
1+
import { Skeleton, DatumSkeleton } from '@siafoundation/design-system'
2+
import { EntityList } from '../Entity/EntityList'
63
import { times } from '@technically/lodash'
74
import { ContentLayout } from '../ContentLayout'
85

‎apps/explorer/components/Contract/index.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
import { useMemo } from 'react'
44
import BigNumber from 'bignumber.js'
55
import { humanBytes, humanSiacoin } from '@siafoundation/units'
6-
import {
7-
EntityList,
8-
EntityListItemProps,
9-
useActiveSiascanExchangeRate,
10-
} from '@siafoundation/design-system'
6+
import { useActiveSiascanExchangeRate } from '@siafoundation/design-system'
7+
import { EntityList } from '../Entity/EntityList'
8+
import { EntityListItemProps } from '../Entity/EntityListItem'
119
import { DatumProps, ExplorerDatum } from '../ExplorerDatum'
1210
import { ContentLayout } from '../ContentLayout'
1311
import { ContractHeader } from './ContractHeader'

‎apps/explorer/components/ContractSkeleton/index.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import {
2-
Skeleton,
3-
EntityList,
4-
DatumSkeleton,
5-
} from '@siafoundation/design-system'
1+
import { Skeleton, DatumSkeleton } from '@siafoundation/design-system'
2+
import { EntityList } from '../Entity/EntityList'
63
import { times } from '@technically/lodash'
74
import { ContentLayout } from '../ContentLayout'
85

‎libs/design-system/src/components/BlockList.tsx renamed to ‎apps/explorer/components/Entity/BlockList.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { Panel } from '../core/Panel'
2-
import { Heading } from '../core/Heading'
3-
import { Link } from '../core/Link'
4-
import { Text } from '../core/Text'
1+
import {
2+
ClientSideOnly,
3+
Heading,
4+
Link,
5+
Panel,
6+
Skeleton,
7+
Text,
8+
} from '@siafoundation/design-system'
59
import { humanNumber, getEntityTypeLabel } from '@siafoundation/units'
610
import { formatDistance } from 'date-fns'
711
import { EntityAvatar } from './EntityAvatar'
812
import { cx } from 'class-variance-authority'
913
import { EntityListSkeleton } from './EntityListSkeleton'
10-
import { ClientSideOnly } from './ClientSideOnly'
11-
import { Skeleton } from '../core/Skeleton'
12-
1314
type BlockListItemProps = {
1415
miningPool?: string
1516
timestamp: string | number

‎libs/design-system/src/components/EntityAvatar.tsx renamed to ‎apps/explorer/components/Entity/EntityAvatar.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
'use client'
22

3-
import { Avatar } from '../core/Avatar'
4-
import { Link } from '../core/Link'
5-
import { Tooltip } from '../core/Tooltip'
3+
import { Avatar, Link, Tooltip } from '@siafoundation/design-system'
64
import { EntityType, getEntityTypeLabel } from '@siafoundation/units'
75

86
type Props = {
@@ -54,6 +52,6 @@ export function EntityAvatar({
5452
function initializeWords(str: string) {
5553
return str
5654
.split(' ')
57-
.map((word) => word.charAt(0).toUpperCase)
55+
.map((word) => word.charAt(0).toUpperCase())
5856
.join('')
5957
}

‎libs/design-system/src/components/EntityList.tsx renamed to ‎apps/explorer/components/Entity/EntityList.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
'use client'
22

3-
import { Heading } from '../core/Heading'
4-
import { Panel } from '../core/Panel'
5-
import { Text } from '../core/Text'
3+
import { Heading, Panel, Text } from '@siafoundation/design-system'
64
import React from 'react'
75
import { cx } from 'class-variance-authority'
86
import { EntityListSkeleton } from './EntityListSkeleton'

‎libs/design-system/src/components/EntityListItem.tsx renamed to ‎apps/explorer/components/Entity/EntityListItem.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
'use client'
22

3-
import { Link } from '../core/Link'
4-
import { Text } from '../core/Text'
5-
import { ValueSf } from './ValueSf'
6-
import { ValueCopyable } from './ValueCopyable'
3+
import {
4+
Link,
5+
Text,
6+
Tooltip,
7+
ValueCopyable,
8+
ValueScFiat,
9+
ValueSf,
10+
} from '@siafoundation/design-system'
711
import {
812
EntityType,
913
getEntityTypeLabel,
@@ -16,8 +20,6 @@ import { upperFirst } from '@technically/lodash'
1620
import BigNumber from 'bignumber.js'
1721
import { DotMark16 } from '@siafoundation/react-icons'
1822
import { EntityListItemLayout } from './EntityListItemLayout'
19-
import { ValueScFiat } from './ValueScFiat'
20-
import { Tooltip } from '../core/Tooltip'
2123

2224
export type EntityListItemProps = {
2325
label?: string

‎libs/design-system/src/components/EntityListItemLayout.tsx renamed to ‎apps/explorer/components/Entity/EntityListItemLayout.tsx

File renamed without changes.

‎libs/design-system/src/components/EntityListSkeleton.tsx renamed to ‎apps/explorer/components/Entity/EntityListSkeleton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Skeleton } from '../core/Skeleton'
1+
import { Skeleton } from '@siafoundation/design-system'
22
import { times } from '@technically/lodash'
33
import { cx } from 'class-variance-authority'
44

‎apps/explorer/components/Home/HostListItem.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
'use client'
22

33
import { formatDistance } from 'date-fns'
4+
import { Text, Tooltip, Link } from '@siafoundation/design-system'
45
import {
56
EntityListItemLayout,
67
EntityListItemLayoutProps,
7-
Text,
8-
Tooltip,
9-
Link,
10-
} from '@siafoundation/design-system'
8+
} from '../Entity/EntityListItemLayout'
119
import {
1210
CloudDownload16,
1311
CloudUpload16,

‎apps/explorer/components/Home/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
import {
44
Text,
5-
BlockList,
65
Tooltip,
7-
EntityList,
86
useActiveSiascanExchangeRate,
97
} from '@siafoundation/design-system'
8+
import { EntityList } from '../Entity/EntityList'
9+
import { BlockList } from '../Entity/BlockList'
1010
import { useMemo } from 'react'
1111
import { routes } from '../../config/routes'
1212
import { ContentLayout } from '../ContentLayout'

‎apps/explorer/components/HomeSkeleton/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Skeleton, BlockList, EntityList } from '@siafoundation/design-system'
1+
import { Skeleton } from '@siafoundation/design-system'
2+
import { EntityList } from '../Entity/EntityList'
3+
import { BlockList } from '../Entity/BlockList'
24
import { ContentLayout } from '../ContentLayout'
35

46
export function HomeSkeleton() {

‎apps/explorer/components/Transaction/OutputListItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use client'
22

33
import {
4-
EntityListItemLayout,
54
Link,
65
ValueCopyable,
76
ValueSc,
87
ValueSf,
98
} from '@siafoundation/design-system'
9+
import { EntityListItemLayout } from '../Entity/EntityListItemLayout'
1010
import BigNumber from 'bignumber.js'
1111

1212
type Props = {

‎apps/explorer/components/Transaction/index.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22

33
import { useMemo } from 'react'
44
import BigNumber from 'bignumber.js'
5-
import {
6-
EntityList,
7-
EntityListItemProps,
8-
stripPrefix,
9-
} from '@siafoundation/design-system'
5+
import { stripPrefix } from '@siafoundation/design-system'
6+
import { EntityList } from '../Entity/EntityList'
7+
import { EntityListItemProps } from '../Entity/EntityListItem'
108
import { routes } from '../../config/routes'
119
import { ContentLayout } from '../ContentLayout'
1210
import { TransactionHeader, TransactionHeaderData } from './TransactionHeader'

‎apps/explorer/components/TransactionSkeleton/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Skeleton, EntityList } from '@siafoundation/design-system'
1+
import { Skeleton } from '@siafoundation/design-system'
2+
import { EntityList } from '../Entity/EntityList'
23
import { ContentLayout } from '../ContentLayout'
34

45
export function TransactionSkeleton() {

‎libs/design-system/src/app/PeerList.tsx

+66-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { Button } from '../core/Button'
2-
import { EntityList } from '../components/EntityList'
2+
import { Heading } from '../core/Heading'
3+
import { Panel } from '../core/Panel'
4+
import { Text } from '../core/Text'
5+
import { Skeleton } from '../core/Skeleton'
6+
import { cx } from 'class-variance-authority'
37

48
type Props = {
59
peers?: string[]
@@ -8,17 +12,67 @@ type Props = {
812
}
913

1014
export function PeerList({ peers, isLoading, connectPeer }: Props) {
15+
const showSkeleton = isLoading && (!peers || peers.length === 0)
16+
const showPeers = peers && peers.length > 0
17+
1118
return (
12-
<EntityList
13-
title="Peers"
14-
actions={<Button onClick={connectPeer}>Connect</Button>}
15-
isLoading={isLoading}
16-
dataset={
17-
peers?.map((netAddress) => ({
18-
type: 'ip',
19-
hash: netAddress,
20-
})) || []
21-
}
22-
/>
19+
<Panel>
20+
<div className="flex flex-col rounded overflow-hidden">
21+
<div className="flex items-center p-4 border-b border-gray-200 dark:border-graydark-300">
22+
<Heading size="20" font="mono" ellipsis>
23+
Peers
24+
</Heading>
25+
<div className="flex-1" />
26+
<Button onClick={connectPeer}>Connect</Button>
27+
</div>
28+
<div className="flex flex-col rounded overflow-hidden">
29+
{showSkeleton &&
30+
Array.from({ length: 10 }).map((_, i) => (
31+
<div
32+
key={i}
33+
className={cx(
34+
'flex items-center gap-4 p-4',
35+
itemBorderStyles()
36+
)}
37+
>
38+
<Skeleton className="w-[60px] h-[20px]" />
39+
</div>
40+
))}
41+
{showPeers &&
42+
peers.map((ip, i) => (
43+
<div
44+
key={ip}
45+
className={cx(
46+
'flex items-center gap-4 p-4',
47+
itemBorderStyles()
48+
)}
49+
>
50+
<Text size="16" weight="medium" ellipsis>
51+
{ip}
52+
</Text>
53+
</div>
54+
))}
55+
{!showSkeleton && (!peers || peers.length === 0) && (
56+
<div
57+
className={cx(
58+
'flex items-center justify-center h-[84px]',
59+
itemBorderStyles()
60+
)}
61+
>
62+
<Text size="18" color="subtle">
63+
No peers
64+
</Text>
65+
</div>
66+
)}
67+
</div>
68+
</div>
69+
</Panel>
70+
)
71+
}
72+
73+
function itemBorderStyles() {
74+
return cx(
75+
'border-t border-gray-200 dark:border-graydark-300',
76+
'first:border-none'
2377
)
2478
}

‎libs/design-system/src/index.ts

-5
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,6 @@ export * from './components/ValueSf'
6161
export * from './components/ValueSc'
6262
export * from './components/ValueScFiat'
6363
export * from './components/ValueNum'
64-
export * from './components/EntityList'
65-
export * from './components/EntityListItem'
66-
export * from './components/EntityListItemLayout'
67-
export * from './components/EntityAvatar'
68-
export * from './components/BlockList'
6964
export * from './components/DatumCard'
7065
export * from './components/DatumSkeleton'
7166
export * from './components/Form'

0 commit comments

Comments
 (0)