Skip to content

Commit e0848f9

Browse files
andrewlee348andrewlee348
committed
feat: added sticky selection to home screen
1 parent dd8a1bb commit e0848f9

File tree

3 files changed

+60
-48
lines changed

3 files changed

+60
-48
lines changed

‎packages/connect/src/styles.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,9 @@ export const styles = String.raw`
210210
.relative {
211211
position: relative;
212212
}
213+
.sticky {
214+
position: sticky;
215+
}
213216
.inset-0 {
214217
inset: calc(var(--spacing) * 0);
215218
}
@@ -1242,6 +1245,10 @@ export const styles = String.raw`
12421245
--tw-shadow: 0 0 10px 0 var(--tw-shadow-color, rgba(0,0,0,0.5));
12431246
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
12441247
}
1248+
.shadow-sm {
1249+
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1250+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1251+
}
12451252
.ring-1 {
12461253
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
12471254
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

‎packages/wallet-widget/src/components/SearchLists/GeneralList.tsx‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -421,57 +421,60 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
421421
value={selectedTab}
422422
onValueChange={value => setSelectedTab(value as 'tokens' | 'collectibles' | 'history')}
423423
>
424-
{variant === 'default' ? (
425-
<div className="flex flex-col w-full relative">
426-
<TabsPrimitive.TabsList className="px-4">
427-
<TabsPrimitive.TabsTrigger className="h-10 relative cursor-pointer" value="tokens">
428-
<Text className="px-4" variant="medium" color={selectedTab === 'tokens' ? 'primary' : 'muted'}>
429-
Coins
430-
</Text>
431-
{selectedTab === 'tokens' && <div className="absolute bottom-0 w-full h-[2px] bg-white" />}
432-
</TabsPrimitive.TabsTrigger>
433-
<TabsPrimitive.TabsTrigger className="h-10 relative cursor-pointer" value="collectibles">
434-
<Text className="px-4" variant="medium" color={selectedTab === 'collectibles' ? 'primary' : 'muted'}>
435-
Collectibles
436-
</Text>
437-
{selectedTab === 'collectibles' && <div className="absolute bottom-0 w-full h-[2px] bg-white" />}
438-
</TabsPrimitive.TabsTrigger>
439-
<TabsPrimitive.TabsTrigger className="h-10 relative cursor-pointer" value="history">
440-
<Text className="px-4" variant="medium" color={selectedTab === 'history' ? 'primary' : 'muted'}>
441-
Transactions
442-
</Text>
443-
{selectedTab === 'history' && <div className="absolute bottom-0 w-full h-[2px] bg-white" />}
444-
</TabsPrimitive.TabsTrigger>
445-
</TabsPrimitive.TabsList>
446-
<Divider className="absolute bottom-0 my-0 w-full" />
447-
</div>
448-
) : (
449-
<div className={cn('flex flex-col px-4 gap-4', `${variant === 'send' && 'pt-4'}`)}>
450-
{variant === 'send' && (
451-
<TabsHeader
452-
tabs={[
453-
{ label: 'Coins', value: 'tokens' },
454-
{ label: 'Collectibles', value: 'collectibles' }
455-
]}
456-
value={selectedTab}
457-
/>
458-
)}
424+
<div className="sticky top-0 z-20 bg-background-primary shadow-sm gap-4">
425+
{variant === 'default' ? (
426+
<div className="flex flex-col w-full relative">
427+
<TabsPrimitive.TabsList className="px-4">
428+
<TabsPrimitive.TabsTrigger className="h-10 relative cursor-pointer" value="tokens">
429+
<Text className="px-4" variant="medium" color={selectedTab === 'tokens' ? 'primary' : 'muted'}>
430+
Coins
431+
</Text>
432+
{selectedTab === 'tokens' && <div className="absolute bottom-0 w-full h-[2px] bg-white" />}
433+
</TabsPrimitive.TabsTrigger>
434+
<TabsPrimitive.TabsTrigger className="h-10 relative cursor-pointer" value="collectibles">
435+
<Text className="px-4" variant="medium" color={selectedTab === 'collectibles' ? 'primary' : 'muted'}>
436+
Collectibles
437+
</Text>
438+
{selectedTab === 'collectibles' && <div className="absolute bottom-0 w-full h-[2px] bg-white" />}
439+
</TabsPrimitive.TabsTrigger>
440+
<TabsPrimitive.TabsTrigger className="h-10 relative cursor-pointer" value="history">
441+
<Text className="px-4" variant="medium" color={selectedTab === 'history' ? 'primary' : 'muted'}>
442+
Transactions
443+
</Text>
444+
{selectedTab === 'history' && <div className="absolute bottom-0 w-full h-[2px] bg-white" />}
445+
</TabsPrimitive.TabsTrigger>
446+
</TabsPrimitive.TabsList>
447+
<Divider className="absolute bottom-0 my-0 w-full" />
448+
</div>
449+
) : (
450+
<div className={cn('flex flex-col px-4 gap-4', `${variant === 'send' && 'pt-4'}`)}>
451+
{variant === 'send' && (
452+
<TabsHeader
453+
tabs={[
454+
{ label: 'Coins', value: 'tokens' },
455+
{ label: 'Collectibles', value: 'collectibles' }
456+
]}
457+
value={selectedTab}
458+
/>
459+
)}
459460

460-
<div>
461-
<TextInput
462-
name="search"
463-
leftIcon={SearchIcon}
464-
value={search}
465-
onChange={ev => setSearch(ev.target.value)}
466-
placeholder="Search your wallet"
467-
/>
461+
<div>
462+
<TextInput
463+
name="search"
464+
leftIcon={SearchIcon}
465+
value={search}
466+
onChange={ev => setSearch(ev.target.value)}
467+
placeholder="Search your wallet"
468+
/>
469+
</div>
468470
</div>
471+
)}
472+
<div className="flex flex-col p-4">
473+
{(variant === 'default' || variant === 'swap') && <FilterMenu filterMenuType={selectedTab} />}
469474
</div>
470-
)}
471-
472-
<div className="flex flex-col p-4 gap-4">
473-
{(variant === 'default' || variant === 'swap') && <FilterMenu filterMenuType={selectedTab} />}
475+
</div>
474476

477+
<div className="flex flex-col p-4 pt-0">
475478
<TabsContent value="tokens">
476479
<div>
477480
<CoinsTab

‎packages/wallet-widget/src/views/Home/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,9 @@ export const Home = () => {
7575
</div>
7676
</div>
7777

78-
<GeneralList variant="default" />
78+
<div className="w-full relative">
79+
<GeneralList variant="default" />
80+
</div>
7981
</div>
8082
)
8183
}

0 commit comments

Comments
 (0)