Add Ethers.js support

examples/nextjs/app/ccip-js-ethers/page.tsx

@@ -0,0 +1,10 @@
+import { CCIPEthers } from "@/components/ccip-with-ethers";
+import { Providers } from "./providers";
+
+export default function CCIPJsPage() {
+  return (
+    <Providers>
+      <CCIPEthers />
+    </Providers>
+  );
+}

examples/nextjs/app/ccip-js/page.tsx → examples/nextjs/app/ccip-js-wagmi/page.tsx

@@ -1,4 +1,4 @@
-import { CCIP } from "@/components/ccip";
+import { CCIP } from "@/components/ccip-with-wagmi";
 import { Providers } from "./providers";
 
 export default function CCIPJsPage() {

examples/nextjs/app/ccip-js-wagmi/providers.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { WagmiProvider } from 'wagmi';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+import { wagmiConfig } from '@/config/wagmiConfig';
+
+const queryClient = new QueryClient();
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}

examples/nextjs/app/layout.tsx

@@ -34,9 +34,15 @@ export default function RootLayout({
           </Link>
           <Link
             className="border border-slate-300 rounded-md p-2 hover:bg-slate-300 transition-colors"
-            href="/ccip-js"
+            href="/ccip-js-wagmi"
           >
-            CCIP-JS
+            CCIP-JS (Wagmi)
+          </Link>
+          <Link
+            className="border border-slate-300 rounded-md p-2 hover:bg-slate-300 transition-colors"
+            href="/ccip-js-ethers"
+          >
+            CCIP-JS (Ethers)
           </Link>
         </nav>
         <main className="flex flex-col items-center justify-center bg-slate-100 grow">