Adds splits sdk and provider (#149)

* Add splits sdk

* Adds working reading usage of splits sdk

* Adds working sdk usage with dependencies

* Removes unncessary providers

* Cleans up debugging code

---------

Co-authored-by: Alec <alecerasmus2@gmail.com>

Author: sudoFerraz

package.json

@@ -11,6 +11,7 @@
     "lint:fix": "eslint \"{src/components,src/app}/*/\" --ext=.ts,.tsx --fix"
   },
   "dependencies": {
+    "@0xsplits/splits-sdk-react": "^1.3.3",
     "@ethereum-attestation-service/eas-sdk": "1.5.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",

src/app/(dashboard)/projects/[projectId]/payments/page.tsx

@@ -11,11 +11,6 @@ interface PageProps {
 
 export default function ProjectPaymentsPage({ params }: PageProps) {
   const projectId = params.projectId;
-  const breadcrumbItems = [
-    { title: "Projects", link: "/projects" },
-    { title: "Project details", link: `/projects/${projectId}` },
-    { title: "Project Payments", link: `/projects/${projectId}/payments` },
-  ];
   const [projectPaymentAddress, setProjectPaymentAddress] = useState<
     PaymentAddressDto | undefined
   >();

src/app/(dashboard)/projects/[projectId]/payments/paymentCreateModal.tsx

@@ -1,6 +1,8 @@
 import { PaymentSplitDto } from "@/app/api/payments/service/paymentSplitsService";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { useSplitsClient } from "@0xsplits/splits-sdk-react";
+import { useAccount } from "wagmi";
 
 type CreatePaymentAddressModalProps = {
   projectId: string;
@@ -11,14 +13,59 @@ export function CreatePaymentAddressModal({
   projectId,
   paymentSplits,
 }: CreatePaymentAddressModalProps) {
+  const account = useAccount();
+
+  const splitsClient = useSplitsClient({
+    // TODO: Use connected chainId
+    chainId: 8453,
+    publicClient: window.ethereum!,
+  });
+
+  const handleCreateSplit = async () => {
+    const recipients = paymentSplits
+      .filter((split) => {
+        return split.paymentSplit != 0 || split.walletAddress == undefined;
+      })
+      .map((split) => ({
+        address: split.walletAddress!,
+        percentAllocation: Number.parseFloat(
+          split.paymentSplit!.toPrecision(2),
+        ),
+      }));
+    const createSplitReq = {
+      recipients: recipients.filter(
+        (recipient) => recipient.address != undefined,
+      ),
+      distributorFeePercent: 0,
+      controller: account.address,
+    };
+    try {
+      const args = {
+        splitAddress: "0x881985d5B0690598b84bcD7348c4A8c842e79419",
+      };
+      const response = await splitsClient.getSplitMetadata(args);
+      console.log(response);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   function missingContributionWallets(): number {
     return paymentSplits.filter((split) => split.walletAddress == null).length;
   }
 
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button className="mr-2">Create Payment Address</Button>
+        <Button className="mr-2" disabled={!account.isConnected}>
+          {account.isConnected ? (
+            <>Create Payment Address</>
+          ) : account.isConnecting || account.isReconnecting ? (
+            <>Connecting...</>
+          ) : (
+            <>Connect wallet</>
+          )}
+        </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-md">
         <div className="flex flex-col items-center space-x-2 pt-6 pb-6">
@@ -46,11 +93,12 @@ export function CreatePaymentAddressModal({
 
                 <Button
                   className="w-1/2  ml-2"
+                  disabled={!account.isConnected}
                   onClick={() => {
-                    console.log("Hi");
+                    handleCreateSplit();
                   }}
                 >
-                  Continue
+                  <>Continue</>
                 </Button>
               </div>
             </div>

src/app/api/payments/service/paymentSplitsService.ts

@@ -110,7 +110,7 @@ export async function removeNoWalletContributors(
     contributionScore: armitageScore,
     contributionScorePercentage: 3,
     paymentSplit: 3,
-    walletAddress: "mywalletaddress",
+    walletAddress: "0xb5685343ed45d8b896633f9c128c55f758feb0aa",
   });
   return userScoresArray;
 }

src/app/providers/providers.tsx

@@ -1,16 +1,16 @@
 "use client";
 import React from "react";
-import { ThemeProvider, useTheme } from "next-themes";
+import { ThemeProvider } from "next-themes";
 
 import { WagmiProvider } from "wagmi";
 import {
   darkTheme,
-  lightTheme,
   getDefaultConfig,
   RainbowKitProvider,
 } from "@rainbow-me/rainbowkit";
 import { base, sepolia } from "viem/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { SplitsProvider } from "@0xsplits/splits-sdk-react";
 
 const queryClient = new QueryClient();
 const config = getDefaultConfig({
@@ -21,46 +21,22 @@ const config = getDefaultConfig({
 });
 
 export default function Providers({ children }: { children: React.ReactNode }) {
-  const { resolvedTheme } = useTheme();
   return (
     <>
       <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>
-          {resolvedTheme === "dark" ? (
-            <RainbowKitProvider
-              theme={darkTheme({
-                accentColor: "#84cc16",
-                accentColorForeground: "black",
-                borderRadius: "medium",
-                fontStack: "system",
-              })}
-            >
-              <ThemeProvider
-                attribute="class"
-                defaultTheme="system"
-                enableSystem
-              >
-                {children}
-              </ThemeProvider>
-            </RainbowKitProvider>
-          ) : (
-            <RainbowKitProvider
-              theme={lightTheme({
-                accentColor: "#84cc16",
-                accentColorForeground: "black",
-                borderRadius: "medium",
-                fontStack: "system",
-              })}
-            >
-              <ThemeProvider
-                attribute="class"
-                defaultTheme="system"
-                enableSystem
-              >
-                {children}
-              </ThemeProvider>
-            </RainbowKitProvider>
-          )}
+          <RainbowKitProvider
+            theme={darkTheme({
+              accentColor: "#84cc16",
+              accentColorForeground: "black",
+              borderRadius: "medium",
+              fontStack: "system",
+            })}
+          >
+            <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+              <SplitsProvider>{children}</SplitsProvider>
+            </ThemeProvider>
+          </RainbowKitProvider>
         </QueryClientProvider>
       </WagmiProvider>
     </>

src/components/payments/contributors/paymentSplitsTable.tsx

@@ -5,8 +5,6 @@ import { useEffect, useState } from "react";
 import { PaymentSplitsDataTable } from "./paymentSplitsDataTable";
 import { PaymentSplitsColumns } from "./paymentSplitsColumns";
 import { Heading } from "@/components/ui/heading";
-import { Button } from "@/components/ui/button";
-import { CreatePaymentAddressModal } from "@/app/(dashboard)/projects/[projectId]/payments/paymentCreateModal";
 
 interface ProjectContributionTableProps {
   projectId: string;