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));
+}