Add the providersfor splits (#154)

* Add the providersfor splits

* Add check for chain ID

Author: AlecErasmus

src/app/providers/providers.tsx

@@ -11,6 +11,7 @@ import {
 import { base, sepolia } from "viem/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { SplitsProvider } from "@0xsplits/splits-sdk-react";
+import { PaymentSplitsProvider } from "./splitsProvider";
 
 const queryClient = new QueryClient();
 const config = getDefaultConfig({
@@ -33,9 +34,15 @@ export default function Providers({ children }: { children: React.ReactNode }) {
               fontStack: "system",
             })}
           >
-            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-              <SplitsProvider>{children}</SplitsProvider>
-            </ThemeProvider>
+            <PaymentSplitsProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+              >
+                {children}
+              </ThemeProvider>
+            </PaymentSplitsProvider>
           </RainbowKitProvider>
         </QueryClientProvider>
       </WagmiProvider>

src/app/providers/splitsProvider.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { SplitsClientConfig, SplitsProvider } from "@0xsplits/splits-sdk-react";
+import { useEffect, useState } from "react";
+import { useChainId, usePublicClient, useWalletClient } from "wagmi";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+export const PaymentSplitsProvider = ({ children }: Props) => {
+  const [splitsConfig, setSplitsConfig] = useState<SplitsClientConfig | null>(
+    null,
+  );
+  const { data: walletClient, status, error } = useWalletClient();
+  const publicClient = usePublicClient();
+  const chainId = useChainId();
+
+  useEffect(() => {
+    if (status == "success" && chainId) {
+      setSplitsConfig({
+        chainId: chainId,
+        walletClient: walletClient,
+        publicClient: publicClient,
+        apiConfig: { apiKey: process.env.NEXT_PUBLIC_SPLITS_API_KEY ?? "" },
+      });
+    } else if (error) {
+      console.log("Error Connecting Wallet Client:" + error);
+    }
+  }, [status, chainId]);
+
+  return (
+    <>
+      {splitsConfig ? (
+        <SplitsProvider config={splitsConfig}>{children}</SplitsProvider>
+      ) : (
+        <>{children}</>
+      )}
+    </>
+  );
+};