fix: lazy-init client, ES2020 target, sodium-native webpack exclusion, dynamic verify page

Author: StellarSplit

next.config.js

@@ -1,3 +1,22 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      // sodium-native is a Node.js native module — exclude from browser bundle
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        net: false,
+        tls: false,
+      };
+    }
+    // Exclude sodium-native from webpack entirely
+    config.externals = [
+      ...(Array.isArray(config.externals) ? config.externals : []),
+      "sodium-native",
+    ];
+    return config;
+  },
+};
+
 module.exports = nextConfig;

src/app/verify/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { unstable_noStore as noStore } from "next/cache";
 import { splitClient } from "@/lib/stellar";
 import { formatAmount } from "@stellar-split/sdk";
 import PaymentProgress from "@/components/PaymentProgress";
@@ -6,11 +7,15 @@ interface Props {
   params: { id: string };
 }
 
+// Force dynamic rendering — this page fetches live on-chain data
+export const dynamic = "force-dynamic";
+
 /**
  * Public verification page — verifies an invoice on-chain via Stellar RPC.
  * No wallet connection required.
  */
 export default async function VerifyPage({ params }: Props) {
+  noStore();
   const { id } = params;
 
   let invoice;

src/lib/stellar.ts

@@ -1,22 +1,26 @@
 /**
- * Initialises the StellarSplitClient singleton from environment variables.
- * Import `splitClient` wherever you need to call the contract.
+ * Lazy-initialised StellarSplitClient.
+ * The client is only constructed on first use, not at module load time.
+ * This prevents build-time errors when env vars are placeholders.
  */
 
 import { StellarSplitClient } from "@stellar-split/sdk";
 import { NETWORK_PASSPHRASE } from "./freighter";
 
-const rpcUrl = process.env.NEXT_PUBLIC_RPC_URL!;
-const contractId = process.env.NEXT_PUBLIC_CONTRACT_ID!;
+let _client: StellarSplitClient | null = null;
 
-if (!rpcUrl || !contractId) {
-  throw new Error(
-    "Missing NEXT_PUBLIC_RPC_URL or NEXT_PUBLIC_CONTRACT_ID environment variables."
-  );
+export function getSplitClient(): StellarSplitClient {
+  if (!_client) {
+    const rpcUrl = process.env.NEXT_PUBLIC_RPC_URL ?? "https://soroban-testnet.stellar.org";
+    const contractId = process.env.NEXT_PUBLIC_CONTRACT_ID ?? "";
+    _client = new StellarSplitClient({ rpcUrl, networkPassphrase: NETWORK_PASSPHRASE, contractId });
+  }
+  return _client;
 }
 
-export const splitClient = new StellarSplitClient({
-  rpcUrl,
-  networkPassphrase: NETWORK_PASSPHRASE,
-  contractId,
+// Convenience re-export for components that use it directly
+export const splitClient = new Proxy({} as StellarSplitClient, {
+  get(_target, prop) {
+    return (getSplitClient() as never)[prop as keyof StellarSplitClient];
+  },
 });

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,