forked from unlock-protocol/unlock
/
LockList.tsx
122 lines (112 loc) · 3.34 KB
/
LockList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { Disclosure } from '@headlessui/react'
import { Lock } from '~/unlockTypes'
import { useConfig } from '~/utils/withConfig'
import { LockCard } from './LockCard'
import {
RiArrowDropUpLine as UpIcon,
RiArrowDropDownLine as DownIcon,
} from 'react-icons/ri'
import { Placeholder } from '@unlock-protocol/ui'
import useLocksByManagerOnNetworks from '~/hooks/useLocksByManager'
import { config } from '~/config/app'
import { ImageBar } from '../../Manage/elements/ImageBar'
export const NoItems = () => {
return (
<ImageBar
src="/images/illustrations/no-locks.svg"
description={
<>
<span>No Locks created.</span>
</>
}
/>
)
}
interface LocksByNetworkProps {
network: number
isLoading: boolean
locks?: any[]
}
interface LockListProps {
owner: string
}
const LocksByNetwork = ({ network, isLoading, locks }: LocksByNetworkProps) => {
const { networks } = useConfig()
const { name: networkName } = networks[network]
if (isLoading)
return (
<Placeholder.Root>
<Placeholder.Card />
<Placeholder.Card />
<Placeholder.Card />
</Placeholder.Root>
)
if (locks?.length === 0) return null
return (
<div className="w-full">
<Disclosure defaultOpen>
{({ open }) => (
<div className="flex flex-col gap-2">
<Disclosure.Button className="flex items-center justify-between w-full outline-none ring-0">
<h2 className="text-lg font-bold text-brand-ui-primary">
{networkName}
</h2>
{open ? (
<UpIcon className="fill-brand-ui-primary" size={24} />
) : (
<DownIcon className="fill-brand-ui-primary" size={24} />
)}
</Disclosure.Button>
<Disclosure.Panel>
<div className="flex flex-col gap-6">
{locks?.map((lock: Lock, index: number) => (
<LockCard key={index} lock={lock} network={network} />
))}
</div>
</Disclosure.Panel>
</div>
)}
</Disclosure>
</div>
)
}
export const LockList = ({ owner }: LockListProps) => {
const { networks, defaultNetwork } = config
const networkEntries = Object.entries(networks)
// Sort networks so that default and preferred networks are first.
const networkItems = [
...networkEntries.filter(([network]) =>
[defaultNetwork.toString()].includes(network)
),
...networkEntries.filter(
([network]) =>
network && !['31337', defaultNetwork.toString()].includes(network)
),
]
const results = useLocksByManagerOnNetworks(owner, networkItems)
const isEmpty = results.reduce((previous: boolean, current: any) => {
return !!(
previous &&
!current.isLoading &&
current.data &&
current.data.length === 0
)
}, true)
return (
<div className="grid gap-20 mb-20">
{networkItems.map(([network], index) => {
const locksByNetwork: any = results?.[index]?.data || []
const isLoading = results?.[index]?.isLoading || false
return (
<LocksByNetwork
isLoading={isLoading}
key={network}
network={Number(network)}
locks={locksByNetwork}
/>
)
})}
{isEmpty && <NoItems />}
</div>
)
}