[wip] bnl (MystenLabs#16745)

## Description 

Describe the changes or additions included in this PR.

## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and do not break anything, you can
skip the following section. Otherwise, please briefly describe what has
changed under the Release Notes section.

### Type of Change (Check all that apply)

- [ ] protocol change
- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

apps/wallet/src/shared/analytics/ampli/index.ts

@@ -137,6 +137,7 @@ export interface ClickedCollectibleCardProperties {
 	 * The ID of an object on Sui.
 	 */
 	objectId: string;
+	sourceScreen?: string;
 }
 
 export interface ClickedCreateNewAccountProperties {
@@ -177,7 +178,7 @@ export interface ClickedSocialSignInButtonProperties {
 	 *
 	 * | Rule | Value |
 	 * |---|---|
-	 * | Enum Values | Microsoft, Facebook, Google, Twitch |
+	 * | Enum Values | Microsoft, Facebook, Google, Twitch, Kakao |
 	 */
 	signInProvider: 'Microsoft' | 'Facebook' | 'Google' | 'Twitch' | 'Kakao';
 	/**

apps/wallet/src/ui/app/components/buynlarge/HomePanel.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ampli } from '_src/shared/analytics/ampli';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Text } from '../../shared/text';
+import Close from './close.svg';
+import { useBuyNLargeAsset } from './useBuyNLargeAsset';
+import { useConfig } from './useConfig';
+
+const SEEN_KEY = 'buy-n-large-seen';
+
+export function BuyNLargeHomePanel() {
+	const navigate = useNavigate();
+	const [seen, setSeen] = useState(() => {
+		const stored = localStorage.getItem(SEEN_KEY);
+		if (stored) {
+			return JSON.parse(stored);
+		}
+		return false;
+	});
+	const config = useConfig();
+
+	const { asset } = useBuyNLargeAsset();
+
+	if (seen || !config || !config.enabled || !asset) return null;
+
+	return (
+		<div>
+			<div
+				role="button"
+				onClick={() => {
+					navigate(
+						`/nft-details?${new URLSearchParams({
+							objectId: asset.data?.objectId ?? '',
+						}).toString()}`,
+					);
+
+					ampli.clickedCollectibleCard({
+						objectId: asset?.data?.objectId ?? '',
+						collectibleType: asset?.data?.type ?? '',
+						sourceScreen: 'HomePanel',
+					});
+				}}
+				className="bg-[#2249E3] flex flex-row items-center rounded-xl px-4 py-3 gap-4 w-full"
+			>
+				<div className="w-8 h-8">
+					<img src={config.homeImage} alt="" className="w-full h-full object-contain" />
+				</div>
+
+				<div className="flex-1">
+					<Text variant="body" weight="medium" color="white">
+						{config.homeDescription}
+					</Text>
+				</div>
+
+				<div>
+					<button
+						type="button"
+						aria-label="Close"
+						className="bg-transparent p-0 m-0 border-none"
+						onClick={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							localStorage.setItem(SEEN_KEY, JSON.stringify(true));
+							setSeen(true);
+						}}
+					>
+						<Close className="text-content-onColor" width={16} height={16} />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/wallet/src/ui/app/components/buynlarge/useBuyNLargeAsset.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useSuiClientQuery } from '@mysten/dapp-kit';
+
+import { useActiveAddress } from '../../hooks';
+import { useConfig } from './useConfig';
+
+export function useBuyNLargeAsset() {
+	const config = useConfig();
+	const address = useActiveAddress();
+	const { data } = useSuiClientQuery(
+		'getOwnedObjects',
+		{
+			owner: address ?? '',
+			filter: { StructType: config?.objectType ?? '' },
+			options: { showDisplay: true, showType: true },
+		},
+		{
+			enabled: !!address && config?.enabled,
+		},
+	);
+
+	return { objectType: config?.enabled ? config?.objectType : null, asset: data?.data[0] };
+}

apps/wallet/src/ui/app/components/buynlarge/useConfig.ts

@@ -0,0 +1,17 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useFeatureValue } from '@growthbook/growthbook-react';
+
+type BuyNLargeConfig = {
+	enabled: boolean;
+	objectType: string;
+	sheetTitle: string;
+	sheetDescription: string;
+	homeDescription: string;
+	homeImage: string;
+};
+
+export function useConfig() {
+	return useFeatureValue<BuyNLargeConfig | null>('buynlarge', null);
+}

apps/wallet/src/ui/app/components/nft-display/index.tsx

@@ -37,7 +37,7 @@ const nftDisplayCardStyles = cva('flex flex-nowrap items-center h-full relative'
 
 export interface NFTDisplayCardProps extends VariantProps<typeof nftDisplayCardStyles> {
 	objectId: string;
-	showLabel?: boolean;
+	hideLabel?: boolean;
 	size: NftImageProps['size'];
 	borderRadius?: NftImageProps['borderRadius'];
 	playable?: boolean;
@@ -46,7 +46,7 @@ export interface NFTDisplayCardProps extends VariantProps<typeof nftDisplayCardS
 
 export function NFTDisplayCard({
 	objectId,
-	showLabel,
+	hideLabel,
 	size,
 	wideView,
 	animateHover,
@@ -106,7 +106,7 @@ export function NFTDisplayCard({
 
 				{orientation === 'horizontal' ? (
 					<div className="flex-1 text-steel-dark overflow-hidden max-w-full ml-2">{nftName}</div>
-				) : !isOwnerToken ? (
+				) : !isOwnerToken && !hideLabel ? (
 					<div className="w-10/12 absolute bottom-2 bg-white/90 rounded-lg left-1/2 -translate-x-1/2 flex items-center justify-center opacity-0 group-hover:opacity-100">
 						<div className="mt-0.5 px-2 py-1 overflow-hidden">
 							<Text variant="subtitleSmall" weight="semibold" mono color="steel-darker" truncate>

apps/wallet/src/ui/app/hooks/useGetNFTs.ts

@@ -6,6 +6,7 @@ import { useKioskClient } from '@mysten/core/src/hooks/useKioskClient';
 import { type SuiObjectData } from '@mysten/sui.js/client';
 import { useMemo } from 'react';
 
+import { useBuyNLargeAsset } from '../components/buynlarge/useBuyNLargeAsset';
 import { useHiddenAssets } from '../pages/home/hidden-assets/HiddenAssetsProvider';
 
 type OwnedAssets = {
@@ -21,6 +22,7 @@ export enum AssetFilterTypes {
 
 export function useGetNFTs(address?: string | null) {
 	const kioskClient = useKioskClient();
+	const { asset, objectType } = useBuyNLargeAsset();
 	const {
 		data,
 		isPending,
@@ -33,7 +35,9 @@ export function useGetNFTs(address?: string | null) {
 	} = useGetOwnedObjects(
 		address,
 		{
-			MatchNone: [{ StructType: '0x2::coin::Coin' }],
+			MatchNone: objectType
+				? [{ StructType: '0x2::coin::Coin' }, { StructType: objectType }]
+				: [{ StructType: '0x2::coin::Coin' }],
 		},
 		50,
 	);
@@ -45,7 +49,8 @@ export function useGetNFTs(address?: string | null) {
 			other: [],
 			hidden: [],
 		};
-		return data?.pages
+
+		const groupedAssets = data?.pages
 			.flatMap((page) => page.data)
 			.filter((asset) => !hiddenAssetIds.includes(asset.data?.objectId!))
 			.reduce((acc, curr) => {
@@ -56,7 +61,13 @@ export function useGetNFTs(address?: string | null) {
 					acc.hidden.push(curr.data as SuiObjectData);
 				return acc;
 			}, ownedAssets);
-	}, [hiddenAssetIds, data?.pages, kioskClient.network]);
+
+		if (asset?.data) {
+			groupedAssets?.visual.unshift(asset.data);
+		}
+
+		return groupedAssets;
+	}, [hiddenAssetIds, data?.pages, kioskClient.network, asset]);
 
 	return {
 		data: assets,

apps/wallet/src/ui/app/pages/home/hidden-assets/index.tsx

@@ -100,12 +100,7 @@ function HiddenNftsPage() {
 										className="no-underline relative truncate"
 									>
 										<ErrorBoundary>
-											<NFTDisplayCard
-												objectId={objectId}
-												size="xs"
-												showLabel
-												orientation="horizontal"
-											/>
+											<NFTDisplayCard objectId={objectId} size="xs" orientation="horizontal" />
 										</ErrorBoundary>
 									</Link>
 									<div className="h-8 w-8">

apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx

@@ -51,7 +51,6 @@ function KioskDetailsPage() {
 										<NFTDisplayCard
 											objectId={item.data?.objectId!}
 											size="md"
-											showLabel
 											animateHover
 											borderRadius="xl"
 											isLocked={item?.isLocked}