[MNY-233] SDK: Add Last Used badge in Connect UI

.changeset/three-fans-flow.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+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

@@ -0,0 +1,30 @@
+import type { AuthArgsType } from "../../../../../wallets/in-app/core/authentication/types.js";
+import { LAST_USED_WALLET_ID } from "../../../../../wallets/manager/index.js";
+import type { WalletId } from "../../../../../wallets/wallet-types.js";
+import { LAST_AUTH_PROVIDER_STORAGE_KEY } from "../../../../core/utils/storage.js";
+
+export function getLastUsedWalletId() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage.getItem(
+        LAST_USED_WALLET_ID,
+      ) as WalletId | null;
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+export function getLastUsedSocialAuth() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage.getItem(LAST_AUTH_PROVIDER_STORAGE_KEY) as
+        | (AuthArgsType["strategy"] & string)
+        | null;
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}

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

@@ -122,7 +122,6 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
     '&[data-active="true"]': {
       backgroundColor: theme.colors.tertiaryBg,
     },
-
     alignItems: "center",
     borderRadius: radius.md,
     boxSizing: "border-box",

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

@@ -1,6 +1,6 @@
 "use client";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { InjectedSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
@@ -19,6 +19,7 @@
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { sortWallets } from "../../utils/sortWallets.js";
 import InAppWalletSelectionUI from "../../wallets/in-app/InAppWalletSelectionUI.js";
+import { LAST_USED_BADGE_VERTICAL_RESERVED_SPACE } from "../components/badge.js";
 import {
   Container,
   Line,
@@ -38,6 +39,7 @@
 import type { ConnectLocale } from "./locale/types.js";
 import { SmartConnectUI } from "./Modal/SmartWalletConnectUI.js";
 import { useScreenContext } from "./Modal/screen.js";
+import { getLastUsedWalletId } from "./Modal/storage.js";
 import { TOS } from "./Modal/TOS.js";
 import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { WalletButtonEl, WalletEntryButton } from "./WalletEntryButton.js";
@@ -136,6 +138,7 @@
   const [approvedTOS, setApprovedTOS] = useState(false);
 
   const installedWallets = getInstalledWallets();
+  const lastUsedWalletId = useMemo(() => getLastUsedWalletId(), []);
   const propsWallets = props.wallets;
   let _wallets: Wallet[] = [...propsWallets];
 
@@ -219,6 +222,11 @@
   const connectAWallet = (
     <WalletTypeRowButton
       className="tw-select-connect-a-wallet-button"
+      lastUsedBadge={
+        !!lastUsedWalletId &&
+        lastUsedWalletId !== "inApp" &&
+        !lastUsedWalletId.startsWith("ecosystem.")
+      }
       client={props.client}
       disabled={props.meta.requireApproval && !approvedTOS}
       icon={OutlineWalletIcon}
@@ -497,7 +505,7 @@
     >
       {/* Header */}
       {showHeader && (
-        <Container p="lg">
+        <Container px="lg" pt="lg" pb="xs">
           {isWalletGroupExpanded ? (
             <ModalHeader
               onBack={() => {
@@ -514,41 +522,42 @@
       {/* Body */}
       <Container
         expand
-        px="md"
         scrollY
         style={
           !showHeader
             ? {
-                paddingTop: spacing.lg,
+                paddingTop: spacing.md,
               }
             : {
                 paddingTop: "2px",
               }
         }
       >
         {!showHeader && isWalletGroupExpanded && (
-          <Container
-            center="y"
-            flex="row"
-            style={{
-              padding: spacing.sm,
-              paddingTop: 0,
-            }}
-          >
-            <IconButton
-              onClick={() => {
-                setIsWalletGroupExpanded(false);
-              }}
+          <Container px="md">
+            <Container
+              center="y"
+              flex="row"
               style={{
-                gap: spacing.xxs,
-                paddingBlock: spacing.xxs,
-                paddingRight: spacing.xs,
-                transform: `translateX(-${spacing.xs})`,
+                padding: spacing.sm,
+                paddingTop: 0,
               }}
             >
-              <ChevronLeftIcon height={iconSize.sm} width={iconSize.sm} />
-              {props.connectLocale.goBackButton}
-            </IconButton>
+              <IconButton
+                onClick={() => {
+                  setIsWalletGroupExpanded(false);
+                }}
+                style={{
+                  gap: spacing.xxs,
+                  paddingBlock: spacing.xxs,
+                  paddingRight: spacing.xs,
+                  transform: `translateX(-${spacing.xs})`,
+                }}
+              >
+                <ChevronLeftIcon height={iconSize.sm} width={iconSize.sm} />
+                {props.connectLocale.goBackButton}
+              </IconButton>
+            </Container>
           </Container>
         )}
 
@@ -602,11 +611,16 @@
   const wallets = sortWallets(props.wallets, props.recommendedWallets);
   const { screen } = useScreenContext();
   const setSelectionData = useSetSelectionData();
+
+  const lastUsedWalletId = useMemo(() => getLastUsedWalletId(), []);
+
   return (
     <WalletList
       style={{
         maxHeight: "370px",
         minHeight: "100%",
+        paddingTop:
+          props.size === "wide" ? 0 : LAST_USED_BADGE_VERTICAL_RESERVED_SPACE,
       }}
     >
       {wallets.map((wallet) => {
@@ -634,7 +648,7 @@
             ) : (
               <WalletEntryButton
                 className="tw-wallet-select-wallet-button"
-                badge={undefined}
+                badge={lastUsedWalletId === wallet.id ? "Last used" : undefined}
                 client={props.client}
                 connectLocale={props.connectLocale}
                 isActive={isActive}
@@ -730,7 +744,7 @@
   margin: "-2px",
   marginBottom: 0,
   // to show the box-shadow of inputs that overflows
-  padding: "2px",
+  paddingInline: spacing.md,
   paddingBottom: spacing.lg,
 });
 

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

@@ -1,6 +1,7 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { iconSize, spacing } from "../../../core/design-system/index.js";
 import { Text } from "../../ui/components/text.js";
+import { LastUsedBadge } from "../components/badge.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
 import type { IconFC } from "./icons/types.js";
@@ -12,6 +13,7 @@ type WalletTypeRowProps = {
   icon: IconFC;
   disabled?: boolean;
   className?: string;
+  lastUsedBadge: boolean;
 };
 
 export function WalletTypeRowButton(props: WalletTypeRowProps) {
@@ -27,9 +29,11 @@ export function WalletTypeRowButton(props: WalletTypeRowProps) {
         display: "flex",
         justifyContent: "flex-start",
         padding: spacing.sm,
+        position: "relative",
       }}
       variant="outline"
     >
+      {props.lastUsedBadge && <LastUsedBadge />}
       <Container center="y" color="accentText" flex="row" gap="sm">
         <props.icon size={iconSize.md} />
         <Text color="primaryText">{props.title}</Text>

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

@@ -153,6 +153,7 @@
                 </Text>
                 <Spacer y="xl" />
                 <InputSelectionUI
+                  lastUsedBadge={false}
                   disabled={
                     loading || !!errorConnecting || !walletConnectClient
                   }

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

@@ -0,0 +1,49 @@
+import { radius, spacing } from "../../../core/design-system/index.js";
+import { Container } from "./basic.js";
+import { Text } from "./text.js";
+
+function Badge(props: { text: string }) {
+  return (
+    <Container
+      bg="modalBg"
+      color="secondaryText"
+      borderColor="borderColor"
+      flex="row"
+      center="y"
+      style={{
+        borderRadius: radius.full,
+        padding: `${spacing["3xs"]} ${spacing.xs}`,
+        borderWidth: "1px",
+        borderStyle: "solid",
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 10,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {props.text}
+      </Text>
+    </Container>
+  );
+}
+
+export function LastUsedBadge() {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: -10,
+        right: -10,
+        zIndex: 1,
+        pointerEvents: "none",
+        cursor: "default",
+      }}
+    >
+      <Badge text="Last used" />
+    </div>
+  );
+}
+
+export const LAST_USED_BADGE_VERTICAL_RESERVED_SPACE = 12;

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

@@ -1,5 +1,6 @@
 import { getInstalledWalletProviders } from "../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
+import { getLastUsedWalletId } from "../ui/ConnectWallet/Modal/storage.js";
 
 /**
  *
@@ -10,6 +11,7 @@
   recommendedWallets?: { id: WalletId }[],
 ): T[] {
   const providers = getInstalledWalletProviders();
+  const lastUsedWalletId = getLastUsedWalletId();
   return (
     wallets
       // show the installed wallets first
@@ -38,6 +40,16 @@
         }
         return 0;
       })
+      // show the last used wallet even before recommended wallets
+      .sort((a, b) => {
+        if (a.id === lastUsedWalletId) {
+          return -1;
+        }
+        if (b.id === lastUsedWalletId) {
+          return 1;
+        }
+        return 0;
+      })
       // show in-app wallets first
       .sort((a, b) => {
         const aIsInApp = a.id === "inApp" || a.id === "embedded";

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

@@ -15,6 +15,7 @@ describe("InputSelectionUI", () => {
 
     render(
       <InputSelectionUI
+        lastUsedBadge={false}
         defaultSmsCountryCode="CA"
         format="phone"
         name=""
@@ -31,6 +32,7 @@ describe("InputSelectionUI", () => {
   it('should initialize countryCodeInfo with "US +1" if defaultSmsCountryCode is not provided', () => {
     render(
       <InputSelectionUI
+        lastUsedBadge={false}
         format="phone"
         name=""
         onSelect={vi.fn()}
@@ -49,6 +51,7 @@ describe("InputSelectionUI", () => {
 
     render(
       <InputSelectionUI
+        lastUsedBadge={false}
         allowedSmsCountryCodes={["IN", "BR"]}
         format="phone"
         name=""

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

@@ -6,6 +6,7 @@ import {
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
+import { LastUsedBadge } from "../../ui/components/badge.js";
 import { IconButton } from "../../ui/components/buttons.js";
 import { Input, InputContainer } from "../../ui/components/formElements.js";
 import { Spacer } from "../../ui/components/Spacer.js";
@@ -26,6 +27,7 @@ export function InputSelectionUI(props: {
   disabled?: boolean;
   defaultSmsCountryCode?: SupportedSmsCountry;
   allowedSmsCountryCodes?: SupportedSmsCountry[];
+  lastUsedBadge: boolean;
 }) {
   const [countryCodeInfo, setCountryCodeInfo] = useState(
     props.defaultSmsCountryCode
@@ -72,6 +74,8 @@ export function InputSelectionUI(props: {
           position: "relative",
         }}
       >
+        {props.lastUsedBadge && <LastUsedBadge />}
+
         {props.format === "phone" && (
           <CountrySelector
             allowedCountryCodes={props.allowedSmsCountryCodes}