Skip to content

Commit f68c2c6

Browse files
MananTankMananTank
authored
[MNY-233] SDK: Add Last Used badge in Connect UI (#8631)
1 parent 5766c90 commit f68c2c6

14 files changed

Lines changed: 239 additions & 29 deletions

File tree

‎.changeset/three-fans-flow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Add Last Used badge in Connect UI to highlight the last used sign-in method

‎packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/storage.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { AuthArgsType } from "../../../../../wallets/in-app/core/authentication/types.js";
2+
import { LAST_USED_WALLET_ID } from "../../../../../wallets/manager/index.js";
3+
import type { WalletId } from "../../../../../wallets/wallet-types.js";
4+
import { LAST_AUTH_PROVIDER_STORAGE_KEY } from "../../../../core/utils/storage.js";
5+
6+
export function getLastUsedWalletId() {
7+
try {
8+
if (typeof window !== "undefined" && window.localStorage) {
9+
return window.localStorage.getItem(
10+
LAST_USED_WALLET_ID,
11+
) as WalletId | null;
12+
}
13+
} catch {
14+
// ignore
15+
}
16+
return null;
17+
}
18+
19+
export function getLastUsedSocialAuth() {
20+
try {
21+
if (typeof window !== "undefined" && window.localStorage) {
22+
return window.localStorage.getItem(LAST_AUTH_PROVIDER_STORAGE_KEY) as
23+
| (AuthArgsType["strategy"] & string)
24+
| null;
25+
}
26+
} catch {
27+
// ignore
28+
}
29+
return null;
30+
}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
122122
'&[data-active="true"]': {
123123
backgroundColor: theme.colors.tertiaryBg,
124124
},
125-
126125
alignItems: "center",
127126
borderRadius: radius.md,
128127
boxSizing: "border-box",

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx‎

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22
import { ChevronLeftIcon } from "@radix-ui/react-icons";
3-
import { useEffect, useRef, useState } from "react";
3+
import { useEffect, useMemo, useRef, useState } from "react";
44
import type { Chain } from "../../../../chains/types.js";
55
import type { ThirdwebClient } from "../../../../client/client.js";
66
import type { InjectedSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
@@ -19,6 +19,7 @@ import {
1919
import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
2020
import { sortWallets } from "../../utils/sortWallets.js";
2121
import InAppWalletSelectionUI from "../../wallets/in-app/InAppWalletSelectionUI.js";
22+
import { LAST_USED_BADGE_VERTICAL_RESERVED_SPACE } from "../components/badge.js";
2223
import {
2324
Container,
2425
Line,
@@ -38,6 +39,7 @@ import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
3839
import type { ConnectLocale } from "./locale/types.js";
3940
import { SmartConnectUI } from "./Modal/SmartWalletConnectUI.js";
4041
import { useScreenContext } from "./Modal/screen.js";
42+
import { getLastUsedWalletId } from "./Modal/storage.js";
4143
import { TOS } from "./Modal/TOS.js";
4244
import { PoweredByThirdweb } from "./PoweredByTW.js";
4345
import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
@@ -136,6 +138,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
136138
const [approvedTOS, setApprovedTOS] = useState(false);
137139

138140
const installedWallets = getInstalledWallets();
141+
const lastUsedWalletId = useMemo(() => getLastUsedWalletId(), []);
139142
const propsWallets = props.wallets;
140143
let _wallets: Wallet[] = [...propsWallets];
141144

@@ -219,6 +222,11 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
219222
const connectAWallet = (
220223
<WalletTypeRowButton
221224
className="tw-select-connect-a-wallet-button"
225+
lastUsedBadge={
226+
!!lastUsedWalletId &&
227+
lastUsedWalletId !== "inApp" &&
228+
!lastUsedWalletId.startsWith("ecosystem.")
229+
}
222230
client={props.client}
223231
disabled={props.meta.requireApproval && !approvedTOS}
224232
icon={OutlineWalletIcon}
@@ -497,7 +505,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
497505
>
498506
{/* Header */}
499507
{showHeader && (
500-
<Container p="lg">
508+
<Container px="lg" pt="lg" pb="xs">
501509
{isWalletGroupExpanded ? (
502510
<ModalHeader
503511
onBack={() => {
@@ -514,41 +522,42 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
514522
{/* Body */}
515523
<Container
516524
expand
517-
px="md"
518525
scrollY
519526
style={
520527
!showHeader
521528
? {
522-
paddingTop: spacing.lg,
529+
paddingTop: spacing.md,
523530
}
524531
: {
525532
paddingTop: "2px",
526533
}
527534
}
528535
>
529536
{!showHeader && isWalletGroupExpanded && (
530-
<Container
531-
center="y"
532-
flex="row"
533-
style={{
534-
padding: spacing.sm,
535-
paddingTop: 0,
536-
}}
537-
>
538-
<IconButton
539-
onClick={() => {
540-
setIsWalletGroupExpanded(false);
541-
}}
537+
<Container px="md">
538+
<Container
539+
center="y"
540+
flex="row"
542541
style={{
543-
gap: spacing.xxs,
544-
paddingBlock: spacing.xxs,
545-
paddingRight: spacing.xs,
546-
transform: `translateX(-${spacing.xs})`,
542+
padding: spacing.sm,
543+
paddingTop: 0,
547544
}}
548545
>
549-
<ChevronLeftIcon height={iconSize.sm} width={iconSize.sm} />
550-
{props.connectLocale.goBackButton}
551-
</IconButton>
546+
<IconButton
547+
onClick={() => {
548+
setIsWalletGroupExpanded(false);
549+
}}
550+
style={{
551+
gap: spacing.xxs,
552+
paddingBlock: spacing.xxs,
553+
paddingRight: spacing.xs,
554+
transform: `translateX(-${spacing.xs})`,
555+
}}
556+
>
557+
<ChevronLeftIcon height={iconSize.sm} width={iconSize.sm} />
558+
{props.connectLocale.goBackButton}
559+
</IconButton>
560+
</Container>
552561
</Container>
553562
)}
554563

@@ -602,11 +611,16 @@ const WalletSelection: React.FC<{
602611
const wallets = sortWallets(props.wallets, props.recommendedWallets);
603612
const { screen } = useScreenContext();
604613
const setSelectionData = useSetSelectionData();
614+
615+
const lastUsedWalletId = useMemo(() => getLastUsedWalletId(), []);
616+
605617
return (
606618
<WalletList
607619
style={{
608620
maxHeight: "370px",
609621
minHeight: "100%",
622+
paddingTop:
623+
props.size === "wide" ? 0 : LAST_USED_BADGE_VERTICAL_RESERVED_SPACE,
610624
}}
611625
>
612626
{wallets.map((wallet) => {
@@ -634,7 +648,7 @@ const WalletSelection: React.FC<{
634648
) : (
635649
<WalletEntryButton
636650
className="tw-wallet-select-wallet-button"
637-
badge={undefined}
651+
badge={lastUsedWalletId === wallet.id ? "Last used" : undefined}
638652
client={props.client}
639653
connectLocale={props.connectLocale}
640654
isActive={isActive}
@@ -730,7 +744,7 @@ const WalletList = /* @__PURE__ */ StyledUl({
730744
margin: "-2px",
731745
marginBottom: 0,
732746
// to show the box-shadow of inputs that overflows
733-
padding: "2px",
747+
paddingInline: spacing.md,
734748
paddingBottom: spacing.lg,
735749
});
736750

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletTypeRowButton.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { ThirdwebClient } from "../../../../client/client.js";
22
import { iconSize, spacing } from "../../../core/design-system/index.js";
33
import { Text } from "../../ui/components/text.js";
4+
import { LastUsedBadge } from "../components/badge.js";
45
import { Container } from "../components/basic.js";
56
import { Button } from "../components/buttons.js";
67
import type { IconFC } from "./icons/types.js";
@@ -12,6 +13,7 @@ type WalletTypeRowProps = {
1213
icon: IconFC;
1314
disabled?: boolean;
1415
className?: string;
16+
lastUsedBadge: boolean;
1517
};
1618

1719
export function WalletTypeRowButton(props: WalletTypeRowProps) {
@@ -27,9 +29,11 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) {
2729
display: "flex",
2830
justifyContent: "flex-start",
2931
padding: spacing.sm,
32+
position: "relative",
3033
}}
3134
variant="outline"
3235
>
36+
{props.lastUsedBadge && <LastUsedBadge />}
3337
<Container center="y" color="accentText" flex="row" gap="sm">
3438
<props.icon size={iconSize.md} />
3539
<Text color="primaryText">{props.title}</Text>

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/WalletConnectReceiverScreen.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export function WalletConnectReceiverScreen(props: {
153153
</Text>
154154
<Spacer y="xl" />
155155
<InputSelectionUI
156+
lastUsedBadge={false}
156157
disabled={
157158
loading || !!errorConnecting || !walletConnectClient
158159
}

‎packages/thirdweb/src/react/web/ui/components/badge.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { radius, spacing } from "../../../core/design-system/index.js";
2+
import { Container } from "./basic.js";
3+
import { Text } from "./text.js";
4+
5+
function Badge(props: { text: string }) {
6+
return (
7+
<Container
8+
bg="modalBg"
9+
color="secondaryText"
10+
borderColor="borderColor"
11+
flex="row"
12+
center="y"
13+
style={{
14+
borderRadius: radius.full,
15+
padding: `${spacing["3xs"]} ${spacing.xs}`,
16+
borderWidth: "1px",
17+
borderStyle: "solid",
18+
}}
19+
>
20+
<Text
21+
style={{
22+
fontSize: 10,
23+
whiteSpace: "nowrap",
24+
}}
25+
>
26+
{props.text}
27+
</Text>
28+
</Container>
29+
);
30+
}
31+
32+
export function LastUsedBadge() {
33+
return (
34+
<div
35+
style={{
36+
position: "absolute",
37+
top: -10,
38+
right: -10,
39+
zIndex: 1,
40+
pointerEvents: "none",
41+
cursor: "default",
42+
}}
43+
>
44+
<Badge text="Last used" />
45+
</div>
46+
);
47+
}
48+
49+
export const LAST_USED_BADGE_VERTICAL_RESERVED_SPACE = 12;

‎packages/thirdweb/src/react/web/utils/sortWallets.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getInstalledWalletProviders } from "../../../wallets/injected/mipdStore.js";
22
import type { WalletId } from "../../../wallets/wallet-types.js";
3+
import { getLastUsedWalletId } from "../ui/ConnectWallet/Modal/storage.js";
34

45
/**
56
*
@@ -10,6 +11,7 @@ export function sortWallets<T extends { id: string }>(
1011
recommendedWallets?: { id: WalletId }[],
1112
): T[] {
1213
const providers = getInstalledWalletProviders();
14+
const lastUsedWalletId = getLastUsedWalletId();
1315
return (
1416
wallets
1517
// show the installed wallets first
@@ -38,6 +40,16 @@ export function sortWallets<T extends { id: string }>(
3840
}
3941
return 0;
4042
})
43+
// show the last used wallet even before recommended wallets
44+
.sort((a, b) => {
45+
if (a.id === lastUsedWalletId) {
46+
return -1;
47+
}
48+
if (b.id === lastUsedWalletId) {
49+
return 1;
50+
}
51+
return 0;
52+
})
4153
// show in-app wallets first
4254
.sort((a, b) => {
4355
const aIsInApp = a.id === "inApp" || a.id === "embedded";

‎packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ describe("InputSelectionUI", () => {
1515

1616
render(
1717
<InputSelectionUI
18+
lastUsedBadge={false}
1819
defaultSmsCountryCode="CA"
1920
format="phone"
2021
name=""
@@ -31,6 +32,7 @@ describe("InputSelectionUI", () => {
3132
it('should initialize countryCodeInfo with "US +1" if defaultSmsCountryCode is not provided', () => {
3233
render(
3334
<InputSelectionUI
35+
lastUsedBadge={false}
3436
format="phone"
3537
name=""
3638
onSelect={vi.fn()}
@@ -49,6 +51,7 @@ describe("InputSelectionUI", () => {
4951

5052
render(
5153
<InputSelectionUI
54+
lastUsedBadge={false}
5255
allowedSmsCountryCodes={["IN", "BR"]}
5356
format="phone"
5457
name=""

‎packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
radius,
77
spacing,
88
} from "../../../core/design-system/index.js";
9+
import { LastUsedBadge } from "../../ui/components/badge.js";
910
import { IconButton } from "../../ui/components/buttons.js";
1011
import { Input, InputContainer } from "../../ui/components/formElements.js";
1112
import { Spacer } from "../../ui/components/Spacer.js";
@@ -26,6 +27,7 @@ export function InputSelectionUI(props: {
2627
disabled?: boolean;
2728
defaultSmsCountryCode?: SupportedSmsCountry;
2829
allowedSmsCountryCodes?: SupportedSmsCountry[];
30+
lastUsedBadge: boolean;
2931
}) {
3032
const [countryCodeInfo, setCountryCodeInfo] = useState(
3133
props.defaultSmsCountryCode
@@ -72,6 +74,8 @@ export function InputSelectionUI(props: {
7274
position: "relative",
7375
}}
7476
>
77+
{props.lastUsedBadge && <LastUsedBadge />}
78+
7579
{props.format === "phone" && (
7680
<CountrySelector
7781
allowedCountryCodes={props.allowedSmsCountryCodes}

0 commit comments

Comments
 (0)