Merge pull request #41 from indexnetwork/integration2

Integration2

web-app/package.json

@@ -108,6 +108,7 @@
     "@types/uuid": "^9.0.7",
     "@types/validator": "^13.7.3",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "autoprefixer": "^10.4.17",
     "eslint": "8.54.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
@@ -125,6 +126,8 @@
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "typescript": "5.2.2"
   },
   "husky": {

web-app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web-app/src/app/_page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import HeroSection from "@/components/sections/landing/Hero";
+import { AuthStatus, useAuth } from "@/context/AuthContext";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+const Landing = () => {
+  const router = useRouter();
+
+  const { status, session } = useAuth();
+
+  useEffect(() => {
+    if (status === AuthStatus.CONNECTED) {
+      router.push(`/${session?.did.parent}`);
+    }
+  }, [status, session, router]);
+
+  return (
+    <div className="bg-mainDark text-primary font-primary">
+      <div className="bg-primary text-secondary h-12">header nav</div>
+      <HeroSection />
+    </div>
+  );
+};
+export default Landing;

web-app/src/app/globals.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: Freizeit;
+  src: url("/fonts/Freizeit-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Freizeit;
+  font-weight: 700;
+  src: url("/fonts/Freizeit-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Roquefort;
+  font-weight: 400;
+  src: url("/fonts/Roquefort-Standard.woff2") format("woff2");
+}

web-app/src/components/new/Button.tsx

@@ -0,0 +1,34 @@
+interface ButtonProps {
+  children: React.ReactNode;
+  onClick: () => void;
+  variant?: "primary" | "outline";
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  onClick,
+  variant = "primary",
+  className = "",
+}) => {
+  // Base styles
+  const baseStyles =
+    "px-4 py-2 font-medium text-base rounded focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+  // Variant-specific styles
+  const variantStyles = {
+    primary: "bg-primary text-passiveDark",
+    outline: "border border-passiveLight text-primary",
+  };
+
+  // Combine styles based on the variant
+  const buttonClasses = `${baseStyles} ${variantStyles[variant]} ${className}`;
+
+  return (
+    <button onClick={onClick} className={buttonClasses}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

web-app/src/components/sections/IndexConversation/TabContainer/SettingsTab/index.tsx

@@ -1,14 +1,13 @@
 import { IconTrash } from "@/components/ai/ui/icons";
+import { useApi } from "@/context/APIContext";
+import { useApp } from "@/context/AppContext";
+import litService from "@/services/lit-service";
+import { AccessControlCondition } from "@/types/entity";
 import Header from "components/base/Header";
 import Text from "components/base/Text";
 import Col from "components/layout/base/Grid/Col";
 import FlexRow from "components/layout/base/Grid/FlexRow";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import litService from "@/services/lit-service";
-import { encodeBase64 } from "ethers";
-import { useApi } from "@/context/APIContext";
-import { useApp } from "@/context/AppContext";
-import { AccessControlCondition } from "@/types/entity";
 import SettingsModal, { SettingsModalStep } from "./SettingsModal";
 
 export interface IndexSettingsTabSectionProps {}
@@ -21,49 +20,31 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
   const loadActionRef = React.useRef(false);
 
   const [showModal, setShowModal] = useState(false);
-  const apiKeys = useMemo(() => conditions.filter((action: any) => action.tag === "apiKey") as any, [conditions]);
+  const apiKeys = useMemo(() => {
+    return conditions
+      .filter((action: any) => action.tag === "apiKey")
+      .map((c: any) => c.value.metadata.walletAddress) as any;
+  }, [conditions]);
 
   const [step, setStep] = useState<SettingsModalStep>("waiting");
-  // const { index } = useIndex();
-  // const [key, setKey] = useState<string>();
-  // const getIntegrationKey = async () => {
-  // 	if (!index) return;
-  // 	const indexSession = await LitService.getPKPSession(index.pkpPublicKey!, index.collabAction!);
-  // 	const personalSession = localStorage.getItem("did");
-  // 	if (!indexSession.session || !personalSession) return;
-  // 	setKey(btoa(JSON.stringify({
-  // 		session: {
-  // 			index: indexSession.session.serialize(),
-  // 			personal: personalSession,
-  // 		},
-  // 		indexId: index.id!,
-  // 	})));
-  // };
-  // useEffect(() => {
-  // 	index && getIntegrationKey();
-  // }, [index]);
-
-  useEffect(() => {
-    loadKeys();
-  }, []);
-
   const loadKeys = useCallback(async () => {
     if (!apiReady || !viewedIndex) return;
     if (loadActionRef.current) return;
     loadActionRef.current = true;
 
     const litActions = await api!.getLITAction(viewedIndex.signerFunction);
+    console.log("litActions", litActions);
     if (litActions && litActions.length > 0) {
       setConditions(litActions as any);
-      setApiKeys(
-        litActions.filter((action: any) => action.tag === "apiKey") as any,
-      );
     }
 
     loadActionRef.current = false;
-    debugger;
   }, [apiReady, viewedIndex]);
 
+  useEffect(() => {
+    loadKeys();
+  }, [loadKeys]);
+
   const handleCancel = useCallback(() => {
     setShowModal(false);
     setStep("waiting");
@@ -96,24 +77,38 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
       const newConditions = [condition, ...deepCopyOfConditions];
 
       await createConditions(newConditions);
-      setSecretKey(encodeBase64(JSON.stringify(authSig)));
-      setApiKeys([...apiKeys, authSig.address]);
-
-      setStep("done");
+      setSecretKey(btoa(JSON.stringify(authSig)));
     } catch (e) {
-      console.error(e);
+      console.error("Error creating rule", e);
+      setSecretKey("Something went wrong, please try again.");
+    } finally {
+      setStep("done");
     }
   }, []);
 
   const handleRemove = useCallback(
-    (key: string) => {
-      setApiKeys(apiKeys.filter((k) => k !== key));
+    async (i: number) => {
+      if (!apiReady) return;
+      setShowModal(true);
+
+      try {
+        const deepCopyOfConditions = JSON.parse(JSON.stringify(conditions));
+
+        const newConditions = [
+          ...deepCopyOfConditions.slice(0, i),
+          ...deepCopyOfConditions.slice(i + 1),
+        ];
+        await createConditions(newConditions);
+      } catch (error) {
+        console.error("Error removing rule", error);
+      } finally {
+        setStep("done");
+      }
     },
-    [apiKeys],
+    [apiReady],
   );
 
   const onDone = useCallback(() => {
-    // setApiKeys([...apiKeys, secretKey!]);
     setShowModal(false);
     setStep("waiting");
     setSecretKey(undefined);
@@ -150,7 +145,7 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
                 flexDirection: "column",
               }}
             >
-              {apiKeys.map((key, i) => (
+              {apiKeys.map((key: any, i: number) => (
                 <div
                   key={key}
                   style={{
@@ -162,7 +157,7 @@ const IndexSettingsTabSection: React.FC<IndexSettingsTabSectionProps> = () => {
                       apiKeys.length - 1 === i ? "none" : "1px solid #E2E8F0",
                   }}
                 >
-                  <Text> {JSON.stringify(key)}</Text>
+                  <Text> {key}</Text>
                   <button
                     style={{
                       background: "none",

web-app/src/components/sections/landing/Hero.tsx

@@ -0,0 +1,56 @@
+import Button from "@/components/new/Button";
+import { useRouter } from "next/navigation";
+
+const HeroSection = () => {
+  const router = useRouter();
+
+  return (
+    <section className="relative">
+      <div className="m-auto flex h-screen max-w-screen-lg flex-col gap-12 md:flex-row md:justify-end">
+        {/* <div>
+        <video src="/video/hero.webm" />
+      </div> */}
+        <div className="bottom-0 left-0 top-0 flex items-center md:absolute">
+          <video
+            autoPlay
+            preload="auto"
+            loop
+            className="h-auto w-full md:w-auto"
+          >
+            <source src="/video/hero.webm" type="video/webm" />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+
+        <div className="font-secondary z-10 flex flex-col items-center justify-center gap-4 text-center md:w-[50%] md:items-end md:text-end">
+          <h1 className="text-3xl md:text-6xl">
+            The Composable Discovery Protocol
+          </h1>
+          <p className="text-base">
+            Index allows to create truly personalised and autonomous discovery
+            experiences across the web
+          </p>
+          <div className="flex gap-4">
+            <Button
+              onClick={() => {
+                router.push("/auth");
+              }}
+            >
+              Connect
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                router.push("/auth");
+              }}
+            >
+              Read Docs
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;

web-app/src/components/sections/landing/Partners.tsx

@@ -0,0 +1,5 @@
+const PartnersSection = () => {
+  return <section></section>;
+};
+
+export default PartnersSection;

web-app/tailwind.config.js

@@ -0,0 +1,30 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        mainDark: "#131620",
+        primary: "#ffffff",
+        secondary: "#4192F1",
+        passiveLight: "#D5DDF0",
+        passiveDark: "#0D0D0D",
+      },
+      fontFamily: {
+        primary: ["Inter", "sans-serif"],
+        secondary: ["Freizeit", "sans-serif"],
+      },
+      screens: {
+        lg: "1200px",
+      },
+    },
+  },
+  plugins: [],
+};