Skip to content

Commit

Permalink
ux work
Browse files Browse the repository at this point in the history
  • Loading branch information
@BitHighlander
BitHighlander committed Oct 28, 2024
1 parent 83122d2 commit c785114
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 151 deletions.
8 changes: 7 additions & 1 deletion packages/keepkey-desktop-app/src/plugins/walletConnectToDapps/WalletConnectToDapps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import { DappRegistryGrid } from './components/DappRegistryGrid'

export const WalletConnectToDapps: FC = () => {
return (
<Container p={4} maxW="container.lg" display="flex" alignItems="center" mt={20}>
<Container
p={{ base: 2, md: 4 }}
maxW={{ base: "100%", md: "container.md", lg: "container.lg" }}
display="flex"
alignItems="center"
mt={{ base: 10, md: 16, lg: 20 }}
>
<DappRegistryGrid />
</Container>
)
Expand Down
294 changes: 145 additions & 149 deletions ...ages/keepkey-desktop-app/src/plugins/walletConnectToDapps/components/DappRegistryGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@ import { useModal } from 'hooks/useModal/useModal'
import { useWallet } from 'hooks/useWallet/useWallet'
import { getPioneerClient } from 'lib/getPioneerClient'
import type { FC } from 'react'
import { useCallback } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useForm, useWatch } from 'react-hook-form'
import { useHistory } from 'react-router'

import type { RegistryItem } from '../types'
import { PageInput } from './PageInput'

const TAG = ' | DappRegistryGrid.tsx | '
const PAGE_SIZE = 20
const loadingImg = kkIconBlack
Expand Down Expand Up @@ -62,182 +61,179 @@ export const DappRegistryGrid: FC = () => {
if (Number(major) >= 7 && Number(minor) >= 6) setSupportsVerify(true)
})
}, [wallet])

const filteredListings = useMemo(
() =>
registryItems &&
registryItems.filter(
registryItem => !search || registryItem.name.toLowerCase().includes(search.toLowerCase()),
),
[search, registryItems],
() =>
registryItems &&
registryItems.filter(
registryItem => !search || registryItem.name.toLowerCase().includes(search.toLowerCase()),
),
[search, registryItems],
)

let findDapps = async function () {
const findDapps = async () => {
try {
setLoading(true)
const pioneer = await getPioneerClient()
let version = await ipcListeners.appVersion()
console.log('version: ', version)
// let dapps = await pioneer.ListApps({ limit: 1000, skip: 0 })
let dapps = await pioneer.ListAppsByVersion({ minVersion: version, limit: 1000, skip: 0 })
function sortByScore(arr: any[]) {
//sort array by score
arr.sort((a, b) => {
const scoreA = a.score || 0
const scoreB = b.score || 0
return scoreB - scoreA
})
//filter out elements with score less than 0
arr = arr.filter(el => el.score >= 0)
//return sorted array
return arr

const sortByScore = (arr: any[]) => {
arr.sort((a, b) => (b.score || 0) - (a.score || 0))
return arr.filter(el => el.score >= 0)
}

dapps = sortByScore(dapps.data)
setRegistryItems(dapps)
setLoading(false)
} catch (e) {
console.error(' e: ', e)
}
}

useEffect(() => {
findDapps()
}, [])

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

const openDapp = useCallback(
(app: RegistryItem) => {
console.log(TAG,'openDapp app: ', app)
history.push('/browser')
setTimeout(() => {
dispatch({ type: WalletActions.SET_BROWSER_URL, payload: app.homepage })
}, 2000)
},
[dispatch, history],
(app: RegistryItem) => {
console.log(TAG, 'openDapp app: ', app)
history.push('/browser')
setTimeout(() => {
dispatch({ type: WalletActions.SET_BROWSER_URL, payload: app.homepage })
}, 2000)
},
[dispatch, history],
)

const clickDapp = useCallback(
(app: RegistryItem) => {
console.log('Dapp clicked', app)
if (supportsVerify) dappClick.open({ onContinue: () => openDapp(app) })
else openDapp(app)
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[dappClick, openDapp],
(app: RegistryItem) => {
console.log('Dapp clicked', app)
if (supportsVerify) dappClick.open({ onContinue: () => openDapp(app) })
else openDapp(app)
},
[dappClick, openDapp],
)

return (
<Box>
<Stack direction='row' alignItems='center' mb={4}>
<Heading flex={1} fontSize='2xl'>
<Text translation='plugins.walletConnectToDapps.registry.availableDapps' />
</Heading>
<Box>
<InputGroup>
<InputLeftElement pointerEvents='none'>
<SearchIcon color='gray.700' />
</InputLeftElement>
<Input
{...register('search')}
autoComplete='off'
type='text'
placeholder='Search'
pl={10}
variant='filled'
/>
</InputGroup>
</Box>
<PageInput value={page} max={maxPage} onChange={value => setValue('page', value)} />
</Stack>
{loading && (
<SimpleGrid columns={{ lg: 4, sm: 2, base: 1 }} spacing={4}>
{Array.from(Array(PAGE_SIZE).keys()).map((_i, idx) => (
<Box
key={`loading_${idx}`}
borderRadius='lg'
p={2}
position='relative'
overflow='hidden'
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
>
<Image
src={loadingImg}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
filter: 'blur(20px)',
opacity: 0.3,
zIndex: -1,
}}
<Box>
<Stack direction='row' alignItems='center' mb={4} flexWrap="wrap">
<Heading flex={{ base: '100%', md: 1 }} fontSize={{ base: 'xl', md: '2xl' }}>
<Text translation='plugins.walletConnectToDapps.registry.availableDapps' />
</Heading>
<Box w={{ base: '100%', md: 'auto' }} mt={{ base: 2, md: 0 }}>
<InputGroup size="sm">
<InputLeftElement pointerEvents='none'>
<SearchIcon color='gray.700' />
</InputLeftElement>
<Input
{...register('search')}
autoComplete='off'
type='text'
placeholder='Search'
pl={10}
variant='filled'
size={{ base: 'sm', md: 'md' }}
/>
<Stack direction='row' alignItems='center'>
<Skeleton key={idx} isLoaded={!loading} boxSize='48px'>
<Image borderRadius='full' boxSize='48px' m={2} src={loadingImg} />
</Skeleton>
<SkeletonText noOfLines={1} isLoaded={!loading}>
<PlainText fontWeight='semibold'>Fake name</PlainText>
</SkeletonText>
</Stack>
</Box>
))}
</SimpleGrid>
)}
{filteredListings && filteredListings.length !== 0 ? (
<SimpleGrid columns={{ lg: 4, sm: 2, base: 1 }} spacing={4}>
{filteredListings.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE).map(listing => (
<Link key={listing.id} onClick={() => clickDapp(listing)}>
<Box
borderRadius='lg'
p={2}
position='relative'
overflow='hidden'
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
>
<Image
src={listing.image}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
filter: 'blur(20px)',
opacity: 0.3,
zIndex: -1,
}}
/>
<Stack direction='row' alignItems='center'>
<Image borderRadius='full' boxSize='48px' m={2} src={listing.image} />
<PlainText fontWeight='semibold'>{listing.name}</PlainText>
</Stack>
</Box>
</Link>
))}
</SimpleGrid>
) : (
!loading && (
<VStack alignItems='center' p={8} spacing={0}>
<Card
display='grid'
width={14}
height={14}
placeItems='center'
borderRadius='2xl'
borderWidth={0}
mb={4}
>
<SearchIcon color='gray.500' fontSize='xl' />{' '}
</Card>
<Text translation='common.noResultsFound' fontWeight='medium' fontSize='lg' />
<Text
translation='plugins.walletConnectToDapps.registry.emptyStateDescription'
color='gray.500'
/>
</VStack>
)
)}
</Box>
</InputGroup>
</Box>
<PageInput value={page} max={maxPage} onChange={value => setValue('page', value)} />
</Stack>
{loading && (
<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={4}>
{Array.from(Array(PAGE_SIZE).keys()).map((_i, idx) => (
<Box
key={`loading_${idx}`}
borderRadius='lg'
p={2}
position='relative'
overflow='hidden'
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
>
<Image
src={loadingImg}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
filter: 'blur(20px)',
opacity: 0.3,
zIndex: -1,
}}
/>
<Stack direction='row' alignItems='center'>
<Skeleton key={idx} isLoaded={!loading} boxSize='48px'>
<Image borderRadius='full' boxSize='48px' m={2} src={loadingImg} />
</Skeleton>
<SkeletonText noOfLines={1} isLoaded={!loading}>
<PlainText fontWeight='semibold'>Fake name</PlainText>
</SkeletonText>
</Stack>
</Box>
))}
</SimpleGrid>
)}
{filteredListings && filteredListings.length !== 0 ? (
<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={4}>
{filteredListings.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE).map(listing => (
<Link key={listing.id} onClick={() => clickDapp(listing)}>
<Box
borderRadius='lg'
p={2}
position='relative'
overflow='hidden'
_hover={{ opacity: 0.8, transition: 'opacity 0.2s ease-in-out' }}
>
<Image
src={listing.image}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
filter: 'blur(20px)',
opacity: 0.3,
zIndex: -1,
}}
/>
<Stack direction='row' alignItems='center'>
<Image borderRadius='full' boxSize='48px' m={2} src={listing.image} />
<PlainText fontWeight='semibold' fontSize={{ base: 'sm', md: 'md' }}>
{listing.name}
</PlainText>
</Stack>
</Box>
</Link>
))}
</SimpleGrid>
) : (
!loading && (
<VStack alignItems='center' p={8} spacing={0}>
<Card
display='grid'
width={14}
height={14}
placeItems='center'
borderRadius='2xl'
borderWidth={0}
mb={4}
>
<SearchIcon color='gray.500' fontSize='xl' />{' '}
</Card>
<Text translation='common.noResultsFound' fontWeight='medium' fontSize='lg' />
<Text
translation='plugins.walletConnectToDapps.registry.emptyStateDescription'
color='gray.500'
/>
</VStack>
)
)}
</Box>
)
}
2 changes: 1 addition & 1 deletion packages/keepkey-desktop/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "keepkey-desktop",
"version": "3.0.27",
"version": "3.0.28",
"author": {
"name": "KeepKey",
"email": "[email protected]"
Expand Down

0 comments on commit c785114

Please sign in to comment.