diff --git a/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx b/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx index 252d49c6c6a..695e2c025c9 100644 --- a/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx +++ b/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx @@ -4,6 +4,7 @@ import { shortenAddress } from "thirdweb/utils"; import { ChainCombobox } from "@/components/ChainCombobox"; import { getChains } from "@/lib/chains"; import { client } from "@/lib/client"; +import { getEcosystemChainIds } from "@/lib/ecosystemConfig"; import { getEcosystemInfo } from "@/lib/ecosystems"; import { SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS } from "@/util/simplehash"; @@ -45,8 +46,11 @@ export default async function Layout(props: { thirdwebChainsPromise, ]); + const specialChainIds = getEcosystemChainIds(params.ecosystem); + const allowedChainIds = specialChainIds ?? SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS; + const simpleHashChains = thirdwebChains.filter((chain) => - SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS.includes(chain.chainId), + allowedChainIds.includes(chain.chainId), ); return ( diff --git a/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx b/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx index 9097e388cbd..ac4118c005c 100644 --- a/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx +++ b/apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx @@ -1,9 +1,10 @@ import { getAddress } from "thirdweb"; import { AutoConnectWalletConnect } from "@/components/AutoConnectWalletConnect"; import NftGallery from "@/components/NftGallery"; +import { getEcosystemChainIds } from "@/lib/ecosystemConfig"; export default async function Page(props: { - params: Promise<{ address: string }>; + params: Promise<{ ecosystem: string; address: string }>; searchParams: Promise<{ chainId?: string; uri?: string }>; }) { const [searchParams, params] = await Promise.all([ @@ -12,12 +13,18 @@ export default async function Page(props: { ]); const { chainId, uri } = searchParams; - const { address } = params; + const { address, ecosystem } = params; + const allowedChainIds = getEcosystemChainIds(ecosystem); + const parsedChainId = chainId ? Number(chainId) : undefined; return ( <> - + ); } diff --git a/apps/wallet-ui/src/components/ConnectButton.tsx b/apps/wallet-ui/src/components/ConnectButton.tsx index 118a52ed9d6..321d3232b9b 100644 --- a/apps/wallet-ui/src/components/ConnectButton.tsx +++ b/apps/wallet-ui/src/components/ConnectButton.tsx @@ -1,8 +1,10 @@ "use client"; import { useTheme } from "next-themes"; +import { useMemo } from "react"; import { ConnectButton as ThirdwebConnectButton } from "thirdweb/react"; import { ecosystemWallet } from "thirdweb/wallets"; import { client } from "@/lib/client"; +import { getEcosystemChains } from "@/lib/ecosystemConfig"; export default function ConnectButton({ ecosystem, @@ -10,9 +12,12 @@ export default function ConnectButton({ ecosystem: `ecosystem.${string}`; }) { const { theme } = useTheme(); + const chains = useMemo(() => getEcosystemChains(ecosystem), [ecosystem]); return ( getEcosystemChains(ecosystemSlug), + [ecosystemSlug], + ); + + const ecosystemId = ecosystemSlug + ? (`ecosystem.${ecosystemSlug}` as `ecosystem.${string}`) + : undefined; const { data: userAddress } = useQuery({ queryFn: getCurrentUser, @@ -29,6 +44,8 @@ export function ConnectEmbed() { return ( { const success = await login(loginParams); @@ -46,7 +63,7 @@ export function ConnectEmbed() { autoConnect={true} client={client} theme={theme === "light" ? "light" : "dark"} - wallets={[ecosystemWallet(`ecosystem.${params.ecosystem}`)]} + wallets={ecosystemId ? [ecosystemWallet(ecosystemId)] : undefined} /> ); } diff --git a/apps/wallet-ui/src/components/NftGallery.tsx b/apps/wallet-ui/src/components/NftGallery.tsx index fe569bf9485..92cb75b6202 100644 --- a/apps/wallet-ui/src/components/NftGallery.tsx +++ b/apps/wallet-ui/src/components/NftGallery.tsx @@ -20,19 +20,31 @@ export function NftGalleryLoading() { export default async function NftGallery({ owner, chainId, + allowedChainIds, }: { owner: Address; chainId?: number; page?: number; + allowedChainIds?: number[]; }) { + const resolvedChainId = + chainId && allowedChainIds && !allowedChainIds.includes(chainId) + ? undefined + : chainId; + + const chainIdsToQuery = + resolvedChainId !== undefined + ? [Number(resolvedChainId)] + : (allowedChainIds ?? SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS); + const erc721TokensResult = await getErc721Tokens({ - chainIds: chainId ? [Number(chainId)] : SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS, + chainIds: chainIdsToQuery, limit: 36, owner, }); if (erc721TokensResult.tokens.length === 0) { - return ; + return ; } return ( diff --git a/apps/wallet-ui/src/lib/ecosystemConfig.ts b/apps/wallet-ui/src/lib/ecosystemConfig.ts new file mode 100644 index 00000000000..36f2beb6ec3 --- /dev/null +++ b/apps/wallet-ui/src/lib/ecosystemConfig.ts @@ -0,0 +1,34 @@ +import type { Chain } from "thirdweb"; +import { defineChain } from "thirdweb"; + +type EcosystemIdentifier = `ecosystem.${string}` | string | undefined; + +const SPECIAL_ECOSYSTEM_CHAIN_IDS: Record = { + "mon-id": [1, 43114] as const, +}; + +function normalizeEcosystemSlug(ecosystem?: string) { + if (!ecosystem) { + return undefined; + } + if (ecosystem.startsWith("ecosystem.")) { + const [, slug] = ecosystem.split("."); + return slug; + } + return ecosystem; +} + +export function getEcosystemChainIds( + ecosystem?: EcosystemIdentifier, +): number[] | undefined { + const slug = normalizeEcosystemSlug(ecosystem); + const chainIds = slug ? SPECIAL_ECOSYSTEM_CHAIN_IDS[slug] : undefined; + return chainIds ? [...chainIds] : undefined; +} + +export function getEcosystemChains( + ecosystem?: EcosystemIdentifier, +): Chain[] | undefined { + const chainIds = getEcosystemChainIds(ecosystem); + return chainIds?.map((chainId) => defineChain(chainId)); +}