feat: walletconnect uri connection

Author: gregfromstl

apps/wallet-ui/src/app/[ecosystem]/(authed)/layout.tsx

@@ -0,0 +1,35 @@
+import ConnectButton from "@/components/ConnectButton";
+import { authedOnly } from "@/lib/auth";
+import { getEcosystemInfo } from "@/lib/ecosystems";
+
+export default async function Layout({
+	children,
+	params,
+}: {
+	children: React.ReactNode;
+	params: { ecosystem: string };
+}) {
+	await authedOnly();
+	const ecosystem = await getEcosystemInfo(params.ecosystem);
+	return (
+		<div className="flex w-full flex-col items-stretch">
+			<header className="hidden w-full border-accent border-b bg-card py-4 sm:block">
+				<div className="container mx-auto flex justify-between">
+					<div className="flex items-center gap-2">
+						<img
+							className="h-8 w-8"
+							src={ecosystem.imageUrl}
+							alt={ecosystem.name}
+							width={100}
+							height={100}
+						/>
+						<h1 className="font-semibold text-xl">{ecosystem.name}</h1>
+					</div>
+					<ConnectButton ecosystem={`ecosystem.${params.ecosystem}`} />
+				</div>
+			</header>
+
+			<main className="flex h-full w-full">{children}</main>
+		</div>
+	);
+}

apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/layout.tsx

@@ -0,0 +1,65 @@
+import { ChainCombobox } from "@/components/ChainCombobox";
+import { getChains } from "@/lib/chains";
+import { client } from "@/lib/client";
+import { getEcosystemInfo } from "@/lib/ecosystems";
+import { SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS } from "@/util/simplehash";
+import type { Metadata, ResolvingMetadata } from "next";
+import { resolveName } from "thirdweb/extensions/ens";
+import { shortenAddress } from "thirdweb/utils";
+
+export async function generateMetadata(
+	{ params }: { params: { ecosystem: string; address: string } },
+	parent: ResolvingMetadata,
+): Promise<Metadata> {
+	const [ecosystem, parentMetadata] = await Promise.all([
+		getEcosystemInfo(params.ecosystem),
+		parent,
+	]);
+	const previousImages = parentMetadata.openGraph?.images || [];
+
+	return {
+		title: `${ecosystem.name} | ${shortenAddress(params.address)}`,
+		openGraph: {
+			images: [ecosystem.imageUrl, ...previousImages],
+		},
+	};
+}
+
+export default async function Layout({
+	children,
+	params,
+}: {
+	children: React.ReactNode;
+	params: { ecosystem: string; address: string };
+}) {
+	const ensPromise = resolveName({
+		client,
+		address: params.address,
+	});
+	const thirdwebChainsPromise = getChains();
+
+	const [ens, thirdwebChains] = await Promise.all([
+		ensPromise,
+		thirdwebChainsPromise,
+	]);
+
+	const simpleHashChains = thirdwebChains.filter((chain) =>
+		SIMPLEHASH_NFT_SUPPORTED_CHAIN_IDS.includes(chain.chainId),
+	);
+
+	return (
+		<div className="flex w-full flex-col">
+			<div className="mb-4 border-b bg-card pt-36">
+				<div className="container flex w-full flex-col items-end justify-between gap-4 bg-card py-4 md:flex-row">
+					<h2 className="font-bold text-4xl">
+						{ens || shortenAddress(params.address)}
+					</h2>
+					<ChainCombobox chains={simpleHashChains} />
+				</div>
+			</div>
+			<div className="container flex-1 py-4">
+				<div className="h-full">{children}</div>
+			</div>
+		</div>
+	);
+}

apps/wallet-ui/src/app/[ecosystem]/(ui)/wallet/[address]/loading.tsx renamed to apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/loading.tsx

@@ -0,0 +1,18 @@
+import { AutoConnectWalletConnect } from "@/components/AutoConnectWalletConnect";
+import NftGallery from "@/components/NftGallery";
+import { getAddress } from "thirdweb";
+
+export default function Page({
+	params: { address },
+	searchParams: { chainId, uri },
+}: {
+	params: { address: string };
+	searchParams: { chainId?: string; uri?: string };
+}) {
+	return (
+		<>
+			<AutoConnectWalletConnect uri={uri} />
+			<NftGallery owner={getAddress(address)} chainId={Number(chainId)} />
+		</>
+	);
+}

apps/wallet-ui/src/app/[ecosystem]/(authed)/wallet/[address]/page.tsx

@@ -2,18 +2,16 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "../../../lib/auth";
 
 export default async function Layout({
-  children,
+	children,
 }: { children: React.ReactNode }) {
-  const userAddress = await getCurrentUser();
-  console.log("userAddress", userAddress);
-  if (userAddress) {
-    console.log("redirecting to wallet", userAddress);
-    redirect(`/wallet/${userAddress}`);
-  }
+	const userAddress = await getCurrentUser();
+	if (userAddress) {
+		redirect(`/wallet/${userAddress}`);
+	}
 
-  return (
-    <main className="flex w-full flex-col items-center justify-center">
-      {children}
-    </main>
-  );
+	return (
+		<main className="flex w-full flex-col items-center justify-center">
+			{children}
+		</main>
+	);
 }

apps/wallet-ui/src/app/[ecosystem]/(ui)/layout.tsx

@@ -1,33 +1,5 @@
-"use client";
-import { generatePayload, getCurrentUser, login, logout } from "@/lib/auth";
-import { client } from "@/lib/client";
-import { useTheme } from "next-themes";
-import { useRouter } from "next/navigation";
-import type { VerifyLoginPayloadParams } from "thirdweb/auth";
-import { ConnectEmbed } from "thirdweb/react";
-import { ecosystemWallet } from "thirdweb/wallets";
+import { ConnectEmbed } from "@/components/ConnectEmbed";
 
-export default function Page({ params }: { params: { ecosystem: string } }) {
-  const { theme } = useTheme();
-  const router = useRouter();
-
-  return (
-    <ConnectEmbed
-      theme={theme === "light" ? "light" : "dark"}
-      autoConnect={true}
-      wallets={[ecosystemWallet(`ecosystem.${params.ecosystem}`)]}
-      client={client}
-      auth={{
-        getLoginPayload: generatePayload,
-        doLogin: async (loginParams: VerifyLoginPayloadParams) => {
-          const success = await login(loginParams);
-          if (success) {
-            router.push(`/wallet/${loginParams.payload.address}`);
-          }
-        },
-        isLoggedIn: async () => !!(await getCurrentUser()),
-        doLogout: logout,
-      }}
-    />
-  );
+export default function Page() {
+	return <ConnectEmbed />;
 }

apps/wallet-ui/src/app/[ecosystem]/(ui)/wallet/[address]/layout.tsx

@@ -0,0 +1,17 @@
+// This page is to accept a Wallet Connect request
+import { getCurrentUser } from "@/lib/auth";
+import { redirect } from "next/navigation";
+
+export default async function Page({
+	searchParams: { uri },
+}: {
+	searchParams: { uri: string };
+}) {
+	const currentUser = await getCurrentUser();
+
+	if (!currentUser) {
+		redirect(`/login?uri=${encodeURIComponent(uri)}`);
+	}
+
+	redirect(`/wallet/${currentUser}?uri=${encodeURIComponent(uri)}`);
+}