[Ecosystem Portal] Fix: WalletConnect Connection (#5438)

CNCT-2258

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `wallet-ui` application, introducing multi-tenancy support, updating configurations, and improving code quality with better imports and utility functions.

### Detailed summary
- Removed unused files: `erc20.ts`, `Erc20Token.ts`
- Added `isMultiTenant` utility for environment checks
- Updated `README.md` for ecosystem portal
- Enhanced routing with ecosystem ID in redirects
- Introduced new configuration files for `knip` and `biome`
- Updated ESLint rules and configurations
- Refactored image handling to use a new `Image` component
- Streamlined various imports across components and hooks

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

.github/labeler.yml

@@ -8,6 +8,12 @@ playground:
 packages:
   - changed-files:
     - any-glob-to-any-file: "packages/**/*"
+sdk:
+  - changed-files:
+    - any-glob-to-any-file: "packages/thirdweb/**/*"
 portal:
   - changed-files:
     - any-glob-to-any-file: "apps/portal/**/*"
+"Ecosystem Portal":
+  - changed-files:
+    - any-glob-to-any-file: "apps/wallet-ui/**/*"

apps/wallet-ui/.env.example

@@ -1,5 +1,7 @@
 # Root domain for the app
-NEXT_PUBLIC_ROOT_DOMAIN=ecosystem.localhost:3000
+NEXT_PUBLIC_ROOT_DOMAIN=localhost:3000
+# If set to production, multi-tenant subdomains will be used
+NEXT_PUBLIC_ENVIRONMENT=development
 # Thirdweb client ID
 NEXT_PUBLIC_THIRDWEB_CLIENT_ID=
 # Thirdweb API key

apps/wallet-ui/.eslintrc.js

@@ -0,0 +1,71 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@next/next/recommended",
+  ],
+  rules: {
+    "react-compiler/react-compiler": "error",
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "CallExpression[callee.name='useEffect']",
+        message:
+          'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
+      },
+      {
+        selector: "CallExpression[callee.name='createContext']",
+        message:
+          'Are you *sure* you need to use a "Context"? In almost all cases you should prefer passing props directly.',
+      },
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "next/navigation",
+            importNames: ["useRouter"],
+            message:
+              'Use `import { useRouter } from "@/lib/useRouter";` instead',
+          },
+        ],
+      },
+    ],
+  },
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react-compiler"],
+  parserOptions: {
+    ecmaVersion: 2019,
+    ecmaFeatures: {
+      impliedStrict: true,
+      jsx: true,
+    },
+    warnOnUnsupportedTypeScriptVersion: true,
+  },
+  settings: {
+    react: {
+      createClass: "createReactClass",
+      pragma: "React",
+      version: "detect",
+    },
+  },
+  overrides: [
+    // enable rule specifically for TypeScript files
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "@typescript-eslint/explicit-module-boundary-types": ["off"],
+      },
+    },
+    // THIS NEEDS TO GO LAST!
+    {
+      files: ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      extends: ["biome"],
+    },
+  ],
+  env: {
+    browser: true,
+    node: true,
+  },
+};

apps/wallet-ui/README.md

@@ -1 +1 @@
-# thirdweb Wallet UI
+# thirdweb Ecosystem Portal

apps/wallet-ui/biome.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+  "extends": ["../../biome.json"],
+  "overrides": [
+    {
+      "include": ["src/css/swagger-ui.css"],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noImportantInKeyframe": "off"
+          }
+        }
+      }
+    }
+  ]
+}

apps/wallet-ui/knip.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://unpkg.com/knip@latest/schema.json",
+  "next": true,
+  "ignore": ["src/components/ui/**"],
+  "ignoreBinaries": ["biome"],
+  "ignoreDependencies": ["thirdweb"],
+  "project": ["src/**"]
+}

apps/wallet-ui/package.json

@@ -6,8 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "biome check ./src",
-    "fix": "biome check ./src --fix"
+    "lint": "biome check ./src && knip && eslint ./src",
+    "fix": "biome check ./src --fix && knip --fix --allow-remove-files && eslint ./src --fix"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -16,7 +16,6 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.2",
     "@tanstack/react-query": "5.60.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -27,6 +26,7 @@
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-hook-form": "7.52.0",
+    "server-only": "^0.0.1",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
@@ -35,12 +35,18 @@
     "zod": "3.23.8"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "15.0.3",
     "@types/node": "20.14.9",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
     "eslint": "8.57.0",
-    "eslint-config-next": "15.0.3",
+    "eslint-config-biome": "1.9.3",
+    "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "knip": "5.37.0",
     "postcss": "8.4.49",
+    "postcss-load-config": "^6.0.1",
     "tailwindcss": "3.4.15",
     "typescript": "5.6.3"
   }

apps/wallet-ui/postcss.config.mjs

@@ -5,4 +5,4 @@ const config = {
   },
 };
 
-export default config;
+export default config;

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

@@ -1,4 +1,5 @@
 import ConnectButton from "@/components/ConnectButton";
+import { Image } from "@/components/ui/image";
 import { authedOnly } from "@/lib/auth";
 import { getEcosystemInfo } from "@/lib/ecosystems";
 import { resolveScheme } from "thirdweb/storage";
@@ -12,14 +13,14 @@ export default async function Layout(props: {
 
   const { children } = props;
 
-  await authedOnly();
+  await authedOnly(params.ecosystem);
   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
+            <Image
               className="h-8 w-8"
               src={resolveScheme({ uri: ecosystem.imageUrl, client })}
               alt={ecosystem.name}

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

@@ -6,12 +6,12 @@ export default async function Page(props: {
   params: Promise<{ address: string }>;
   searchParams: Promise<{ chainId?: string; uri?: string }>;
 }) {
-  const searchParams = await props.searchParams;
+  const [searchParams, params] = await Promise.all([
+    props.searchParams,
+    props.params,
+  ]);
 
   const { chainId, uri } = searchParams;
-
-  const params = await props.params;
-
   const { address } = params;
 
   return (