Skip to content

Commit c785114

Browse files
BitHighlanderBitHighlander
committed
ux work
1 parent 83122d2 commit c785114

3 files changed

Lines changed: 153 additions & 151 deletions

File tree

‎packages/keepkey-desktop-app/src/plugins/walletConnectToDapps/WalletConnectToDapps.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import { DappRegistryGrid } from './components/DappRegistryGrid'
44

55
export const WalletConnectToDapps: FC = () => {
66
return (
7-
<Container p={4} maxW="container.lg" display="flex" alignItems="center" mt={20}>
7+
<Container
8+
p={{ base: 2, md: 4 }}
9+
maxW={{ base: "100%", md: "container.md", lg: "container.lg" }}
10+
display="flex"
11+
alignItems="center"
12+
mt={{ base: 10, md: 16, lg: 20 }}
13+
>
814
<DappRegistryGrid />
915
</Container>
1016
)

‎packages/keepkey-desktop-app/src/plugins/walletConnectToDapps/components/DappRegistryGrid.tsx‎

Lines changed: 145 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,12 @@ import { useModal } from 'hooks/useModal/useModal'
2323
import { useWallet } from 'hooks/useWallet/useWallet'
2424
import { getPioneerClient } from 'lib/getPioneerClient'
2525
import type { FC } from 'react'
26-
import { useCallback } from 'react'
27-
import { useEffect, useMemo, useState } from 'react'
26+
import { useCallback, useEffect, useMemo, useState } from 'react'
2827
import { useForm, useWatch } from 'react-hook-form'
2928
import { useHistory } from 'react-router'
30-
3129
import type { RegistryItem } from '../types'
3230
import { PageInput } from './PageInput'
31+
3332
const TAG = ' | DappRegistryGrid.tsx | '
3433
const PAGE_SIZE = 20
3534
const loadingImg = kkIconBlack
@@ -62,182 +61,179 @@ export const DappRegistryGrid: FC = () => {
6261
if (Number(major) >= 7 && Number(minor) >= 6) setSupportsVerify(true)
6362
})
6463
}, [wallet])
64+
6565
const filteredListings = useMemo(
66-
() =>
67-
registryItems &&
68-
registryItems.filter(
69-
registryItem => !search || registryItem.name.toLowerCase().includes(search.toLowerCase()),
70-
),
71-
[search, registryItems],
66+
() =>
67+
registryItems &&
68+
registryItems.filter(
69+
registryItem => !search || registryItem.name.toLowerCase().includes(search.toLowerCase()),
70+
),
71+
[search, registryItems],
7272
)
7373

74-
let findDapps = async function () {
74+
const findDapps = async () => {
7575
try {
7676
setLoading(true)
7777
const pioneer = await getPioneerClient()
7878
let version = await ipcListeners.appVersion()
7979
console.log('version: ', version)
80-
// let dapps = await pioneer.ListApps({ limit: 1000, skip: 0 })
8180
let dapps = await pioneer.ListAppsByVersion({ minVersion: version, limit: 1000, skip: 0 })
82-
function sortByScore(arr: any[]) {
83-
//sort array by score
84-
arr.sort((a, b) => {
85-
const scoreA = a.score || 0
86-
const scoreB = b.score || 0
87-
return scoreB - scoreA
88-
})
89-
//filter out elements with score less than 0
90-
arr = arr.filter(el => el.score >= 0)
91-
//return sorted array
92-
return arr
81+
82+
const sortByScore = (arr: any[]) => {
83+
arr.sort((a, b) => (b.score || 0) - (a.score || 0))
84+
return arr.filter(el => el.score >= 0)
9385
}
86+
9487
dapps = sortByScore(dapps.data)
9588
setRegistryItems(dapps)
9689
setLoading(false)
9790
} catch (e) {
9891
console.error(' e: ', e)
9992
}
10093
}
94+
10195
useEffect(() => {
10296
findDapps()
10397
}, [])
10498

10599
const maxPage = filteredListings ? Math.floor(filteredListings.length / PAGE_SIZE) : 0
106100

107101
const openDapp = useCallback(
108-
(app: RegistryItem) => {
109-
console.log(TAG,'openDapp app: ', app)
110-
history.push('/browser')
111-
setTimeout(() => {
112-
dispatch({ type: WalletActions.SET_BROWSER_URL, payload: app.homepage })
113-
}, 2000)
114-
},
115-
[dispatch, history],
102+
(app: RegistryItem) => {
103+
console.log(TAG, 'openDapp app: ', app)
104+
history.push('/browser')
105+
setTimeout(() => {
106+
dispatch({ type: WalletActions.SET_BROWSER_URL, payload: app.homepage })
107+
}, 2000)
108+
},
109+
[dispatch, history],
116110
)
117111

118112
const clickDapp = useCallback(
119-
(app: RegistryItem) => {
120-
console.log('Dapp clicked', app)
121-
if (supportsVerify) dappClick.open({ onContinue: () => openDapp(app) })
122-
else openDapp(app)
123-
},
124-
// eslint-disable-next-line react-hooks/exhaustive-deps
125-
[dappClick, openDapp],
113+
(app: RegistryItem) => {
114+
console.log('Dapp clicked', app)
115+
if (supportsVerify) dappClick.open({ onContinue: () => openDapp(app) })
116+
else openDapp(app)
117+
},
118+
[dappClick, openDapp],
126119
)
127120

128121
return (
129-
<Box>
130-
<Stack direction='row' alignItems='center' mb={4}>
131-
<Heading flex={1} fontSize='2xl'>
132-
<Text translation='plugins.walletConnectToDapps.registry.availableDapps' />
133-
</Heading>
134-
<Box>
135-
<InputGroup>
136-
<InputLeftElement pointerEvents='none'>
137-
<SearchIcon color='gray.700' />
138-
</InputLeftElement>
139-
<Input
140-
{...register('search')}
141-
autoComplete='off'
142-
type='text'
143-
placeholder='Search'
144-
pl={10}
145-
variant='filled'
146-
/>
147-
</InputGroup>
148-
</Box>
149-
<PageInput value={page} max={maxPage} onChange={value => setValue('page', value)} />
150-
</Stack>
151-
{loading && (
152-
<SimpleGrid columns={{ lg: 4, sm: 2, base: 1 }} spacing={4}>
153-
{Array.from(Array(PAGE_SIZE).keys()).map((_i, idx) => (
154-
<Box
155-
key={`loading_${idx}`}
156-
borderRadius='lg'
157-
p={2}
158-
position='relative'
159-
overflow='hidden'
160-
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
161-
>
162-
<Image
163-
src={loadingImg}
164-
style={{
165-
position: 'absolute',
166-
top: 0,
167-
left: 0,
168-
width: '100%',
169-
height: '100%',
170-
filter: 'blur(20px)',
171-
opacity: 0.3,
172-
zIndex: -1,
173-
}}
122+
<Box>
123+
<Stack direction='row' alignItems='center' mb={4} flexWrap="wrap">
124+
<Heading flex={{ base: '100%', md: 1 }} fontSize={{ base: 'xl', md: '2xl' }}>
125+
<Text translation='plugins.walletConnectToDapps.registry.availableDapps' />
126+
</Heading>
127+
<Box w={{ base: '100%', md: 'auto' }} mt={{ base: 2, md: 0 }}>
128+
<InputGroup size="sm">
129+
<InputLeftElement pointerEvents='none'>
130+
<SearchIcon color='gray.700' />
131+
</InputLeftElement>
132+
<Input
133+
{...register('search')}
134+
autoComplete='off'
135+
type='text'
136+
placeholder='Search'
137+
pl={10}
138+
variant='filled'
139+
size={{ base: 'sm', md: 'md' }}
174140
/>
175-
<Stack direction='row' alignItems='center'>
176-
<Skeleton key={idx} isLoaded={!loading} boxSize='48px'>
177-
<Image borderRadius='full' boxSize='48px' m={2} src={loadingImg} />
178-
</Skeleton>
179-
<SkeletonText noOfLines={1} isLoaded={!loading}>
180-
<PlainText fontWeight='semibold'>Fake name</PlainText>
181-
</SkeletonText>
182-
</Stack>
183-
</Box>
184-
))}
185-
</SimpleGrid>
186-
)}
187-
{filteredListings && filteredListings.length !== 0 ? (
188-
<SimpleGrid columns={{ lg: 4, sm: 2, base: 1 }} spacing={4}>
189-
{filteredListings.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE).map(listing => (
190-
<Link key={listing.id} onClick={() => clickDapp(listing)}>
191-
<Box
192-
borderRadius='lg'
193-
p={2}
194-
position='relative'
195-
overflow='hidden'
196-
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
197-
>
198-
<Image
199-
src={listing.image}
200-
style={{
201-
position: 'absolute',
202-
top: 0,
203-
left: 0,
204-
width: '100%',
205-
height: '100%',
206-
filter: 'blur(20px)',
207-
opacity: 0.3,
208-
zIndex: -1,
209-
}}
210-
/>
211-
<Stack direction='row' alignItems='center'>
212-
<Image borderRadius='full' boxSize='48px' m={2} src={listing.image} />
213-
<PlainText fontWeight='semibold'>{listing.name}</PlainText>
214-
</Stack>
215-
</Box>
216-
</Link>
217-
))}
218-
</SimpleGrid>
219-
) : (
220-
!loading && (
221-
<VStack alignItems='center' p={8} spacing={0}>
222-
<Card
223-
display='grid'
224-
width={14}
225-
height={14}
226-
placeItems='center'
227-
borderRadius='2xl'
228-
borderWidth={0}
229-
mb={4}
230-
>
231-
<SearchIcon color='gray.500' fontSize='xl' />{' '}
232-
</Card>
233-
<Text translation='common.noResultsFound' fontWeight='medium' fontSize='lg' />
234-
<Text
235-
translation='plugins.walletConnectToDapps.registry.emptyStateDescription'
236-
color='gray.500'
237-
/>
238-
</VStack>
239-
)
240-
)}
241-
</Box>
141+
</InputGroup>
142+
</Box>
143+
<PageInput value={page} max={maxPage} onChange={value => setValue('page', value)} />
144+
</Stack>
145+
{loading && (
146+
<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={4}>
147+
{Array.from(Array(PAGE_SIZE).keys()).map((_i, idx) => (
148+
<Box
149+
key={`loading_${idx}`}
150+
borderRadius='lg'
151+
p={2}
152+
position='relative'
153+
overflow='hidden'
154+
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
155+
>
156+
<Image
157+
src={loadingImg}
158+
style={{
159+
position: 'absolute',
160+
top: 0,
161+
left: 0,
162+
width: '100%',
163+
height: '100%',
164+
filter: 'blur(20px)',
165+
opacity: 0.3,
166+
zIndex: -1,
167+
}}
168+
/>
169+
<Stack direction='row' alignItems='center'>
170+
<Skeleton key={idx} isLoaded={!loading} boxSize='48px'>
171+
<Image borderRadius='full' boxSize='48px' m={2} src={loadingImg} />
172+
</Skeleton>
173+
<SkeletonText noOfLines={1} isLoaded={!loading}>
174+
<PlainText fontWeight='semibold'>Fake name</PlainText>
175+
</SkeletonText>
176+
</Stack>
177+
</Box>
178+
))}
179+
</SimpleGrid>
180+
)}
181+
{filteredListings && filteredListings.length !== 0 ? (
182+
<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={4}>
183+
{filteredListings.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE).map(listing => (
184+
<Link key={listing.id} onClick={() => clickDapp(listing)}>
185+
<Box
186+
borderRadius='lg'
187+
p={2}
188+
position='relative'
189+
overflow='hidden'
190+
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
191+
>
192+
<Image
193+
src={listing.image}
194+
style={{
195+
position: 'absolute',
196+
top: 0,
197+
left: 0,
198+
width: '100%',
199+
height: '100%',
200+
filter: 'blur(20px)',
201+
opacity: 0.3,
202+
zIndex: -1,
203+
}}
204+
/>
205+
<Stack direction='row' alignItems='center'>
206+
<Image borderRadius='full' boxSize='48px' m={2} src={listing.image} />
207+
<PlainText fontWeight='semibold' fontSize={{ base: 'sm', md: 'md' }}>
208+
{listing.name}
209+
</PlainText>
210+
</Stack>
211+
</Box>
212+
</Link>
213+
))}
214+
</SimpleGrid>
215+
) : (
216+
!loading && (
217+
<VStack alignItems='center' p={8} spacing={0}>
218+
<Card
219+
display='grid'
220+
width={14}
221+
height={14}
222+
placeItems='center'
223+
borderRadius='2xl'
224+
borderWidth={0}
225+
mb={4}
226+
>
227+
<SearchIcon color='gray.500' fontSize='xl' />{' '}
228+
</Card>
229+
<Text translation='common.noResultsFound' fontWeight='medium' fontSize='lg' />
230+
<Text
231+
translation='plugins.walletConnectToDapps.registry.emptyStateDescription'
232+
color='gray.500'
233+
/>
234+
</VStack>
235+
)
236+
)}
237+
</Box>
242238
)
243239
}

‎packages/keepkey-desktop/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "keepkey-desktop",
3-
"version": "3.0.27",
3+
"version": "3.0.28",
44
"author": {
55
"name": "KeepKey",
66
"email": "support@keepkey.com"

0 commit comments

Comments
 (0)