feat(customization): update custom dashboard for scroll (#2647)

* feat(customization): update custom dashboard for scroll

* feat(customization): add button background color

* feat(customization): properly configure on chain button

* feat(customization): minor changes

* 2614 scroll endpoints (#2624)

* Added an endpoint to check eligibility for minting a badge.

* Added a function to check badge eligibility using the Gitcoin Passport Decoder contract.

* Revert "Added a function to check badge eligibility using the Gitcoin Passport Decoder contract."

This reverts commit dd476c42a0f09d736e07ee0e738be69bb5435072.

* Moved the `verifyAttestation` function to a separate `eas.ts` file and updated the `verifyCoinbaseAttestation` function to use the new function.

* feat: claim endpoint

* feat: upgradeing eas & ethers lib, continue work on the  API

* chore(iam): globally upgrade to ethers v6

* fix: remaining tests

* Update node version in ci.yml

* fix: failing test, have upgrdated typescript target to es2020

* fix: linter complaints

* Update node version in job check-provider-bitmap in ci.yml

* feat: upgrading node version acorss all workflow files

* fix: linter issues in app

* fix: remove logs in iam

* fix: remaining build isues with ethers upgrade

* feat: parse score from eas scan

* fix: pass passport attester to endpoint and error handling

* chore: fix serialization

* chore: mock getattestations

---------

Co-authored-by: Gerald Iakobinyi-Pich <nutrina9@gmail.com>

* feat: adding debug statements for review (#2643)

* Revert ethers scroll updates (#2651)

* Revert "feat: adding debug statements for review (#2643)"

This reverts commit dbf7b72.

* Revert "2614 scroll endpoints (#2624)"

This reverts commit 5451968.

* feat(customization): wip fix tests

* feat(customization): fix tests

* feat(customization): modify button action type

* feat(customization): add type for button action type

---------

Co-authored-by: Tim <6887938+digitalmnt@users.noreply.github.com>
Co-authored-by: Gerald Iakobinyi-Pich <nutrina9@gmail.com>

app/__tests__/hooks/useCustomization.test.tsx

@@ -58,6 +58,8 @@ jest.mock("axios", () => {
                 customizationBackground1: "232 65 66",
                 customizationBackground2: "0 0 0",
                 customizationForeground1: "255 255 255",
+                customizationForeground2: "255 255 255",
+                customizationBackground3: "255 136 70",
               },
             },
           },
@@ -107,6 +109,8 @@ jest.mock("axios", () => {
                 customizationBackground1: "255 136 70",
                 customizationBackground2: "255 136 70",
                 customizationForeground1: "255 255 255",
+                customizationForeground2: "255 255 255",
+                customizationBackground3: "255 136 70",
               },
             },
           },

app/components/CustomDashboardPanel.tsx

@@ -1,9 +1,14 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState, Ref, ReactElement, JSXElementConstructor } from "react";
 import { VeraxPanel } from "../components/VeraxPanel";
 import { TestingPanel } from "../components/TestingPanel";
 import { Button } from "../components/Button";
 import { CustomizationLogoBackground } from "../utils/customizationUtils";
 import { useCustomization } from "../hooks/useCustomization";
+import { OnchainSidebar } from "./OnchainSidebar";
+import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+import { Popover } from "@headlessui/react";
+import { usePopper } from "react-popper";
+import { renderToString } from "react-dom/server";
 
 type CustomDashboardPanelProps = {
   logo: {
@@ -63,6 +68,20 @@ export const CustomDashboardPanel = ({ logo, className, children }: CustomDashbo
 
 export const DynamicCustomDashboardPanel = ({ className }: { className: string }) => {
   const customization = useCustomization();
+  const [showSidebar, setShowSidebar] = useState<boolean>(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 24,
+        },
+      },
+    ],
+  });
 
   if (customization.key === "verax") {
     return <VeraxPanel className={className} />;
@@ -71,20 +90,50 @@ export const DynamicCustomDashboardPanel = ({ className }: { className: string }
   if (customization.key === "testing") {
     return <TestingPanel className={className} />;
   }
-
   const { logo, body } = customization.dashboardPanel;
 
+  const onButtonClick = () => {
+    if (body.action?.type === "Onchain Push") {
+      setShowSidebar(true);
+    } else {
+      window.open(body.action.url, "_blank");
+    }
+  };
   return (
     <CustomDashboardPanel className={className} logo={logo}>
-      <div>{body.mainText}</div>
+      {body.displayInfoTooltip && body.displayInfoTooltip.shouldDisplay && body.displayInfoTooltip.text ? (
+        <Popover className={`group cursor-pointer px-2 self-end  absolute top-0 right-0 p-2`}>
+          <Popover.Button as="div" ref={setReferenceElement as unknown as Ref<HTMLButtonElement>}>
+            <div className="mr-4 w-4 self-end">
+              <ExclamationCircleIcon height={24} color={"rgb(var(--color-customization-background-1))"} />
+            </div>
+          </Popover.Button>
+          <Popover.Panel
+            ref={setPopperElement as unknown as Ref<HTMLDivElement>}
+            className={`invisible z-20 max-w-screen-md rounded-md border border-customization-background-1 bg-background text-sm text-color-1 group-hover:visible`}
+            style={styles.popper}
+            {...attributes.popper}
+            static
+          >
+            <div className="px-4 py-2">{body.displayInfoTooltip.text}</div>
+          </Popover.Panel>
+        </Popover>
+      ) : null}
+      <div
+        dangerouslySetInnerHTML={{
+          __html: renderToString(body.mainText as ReactElement<any, string | JSXElementConstructor<any>>) || "",
+        }}
+      />
+
       <div className="text-sm grow">{body.subText}</div>
       <Button
         variant="custom"
-        className={`rounded-s mr-2 mt-2 w-fit self-end bg-customization-background-1 text-customization-foreground-1 hover:bg-customization-background-1/75 enabled:hover:text-color-1 disabled:bg-customization-background-1 disabled:brightness-100`}
-        onClick={() => window.open(body.action.url, "_blank")}
+        className={`rounded-s mr-2 mt-2 w-fit self-end bg-customization-background-3 text-customization-foreground-2 hover:bg-customization-background-3/75 disabled:bg-customization-background-1 disabled:brightness-100`}
+        onClick={onButtonClick}
       >
         {body.action.text}
       </Button>
+      <OnchainSidebar isOpen={showSidebar} onClose={() => setShowSidebar(false)} />
     </CustomDashboardPanel>
   );
 };

app/tailwind.config.js

@@ -51,7 +51,9 @@ module.exports = {
         // colors defined by an API call
         "customization-background-1": "rgb(var(--color-customization-background-1) / <alpha-value>)",
         "customization-background-2": "rgb(var(--color-customization-background-2) / <alpha-value>)",
+        "customization-background-3": "rgb(var(--color-customization-background-3) / <alpha-value>)",
         "customization-foreground-1": "rgb(var(--color-customization-foreground-1) / <alpha-value>)",
+        "customization-foreground-2": "rgb(var(--color-customization-foreground-2) / <alpha-value>)",
 
         // Temporary, to be removed
         accent: "#000",

app/utils/customizationUtils.tsx

@@ -22,6 +22,7 @@ export const initializeDOMPurify = () => {
 };
 
 export type CustomizationLogoBackground = "dots" | "none";
+export type BodyActionType = "Simple Link" | "Onchain Push";
 
 export type Customization = {
   key: string;
@@ -38,6 +39,11 @@ export type Customization = {
       action: {
         text: string;
         url: string;
+        type?: BodyActionType;
+      };
+      displayInfoTooltip?: {
+        shouldDisplay?: boolean;
+        text?: string;
       };
     };
   };
@@ -77,6 +83,11 @@ type CustomizationResponse = {
       action?: {
         text?: string;
         url?: string;
+        type?: BodyActionType;
+      };
+      displayInfoTooltip?: {
+        shouldDisplay?: boolean;
+        text?: string;
       };
     };
   };
@@ -141,6 +152,11 @@ export const requestCustomizationConfig = async (customizationKey: string): Prom
         action: {
           text: customizationResponse.dashboardPanel?.body?.action?.text || "",
           url: sanitize(customizationResponse.dashboardPanel?.body?.action?.url || ""),
+          type: customizationResponse.dashboardPanel?.body?.action?.type,
+        },
+        displayInfoTooltip: {
+          shouldDisplay: customizationResponse.dashboardPanel?.body?.displayInfoTooltip?.shouldDisplay || false,
+          text: customizationResponse.dashboardPanel?.body?.displayInfoTooltip?.text || "",
         },
       },
     },

app/utils/theme/setCustomizationTheme.tsx

@@ -17,6 +17,8 @@ export const setCustomizationTheme = ({ colors }: CustomizationTheme) => {
   r.style.setProperty("--color-customization-background-1", convertHexToRGB(colors.customizationBackground1));
   r.style.setProperty("--color-customization-background-2", convertHexToRGB(colors.customizationBackground2));
   r.style.setProperty("--color-customization-foreground-1", convertHexToRGB(colors.customizationForeground1));
+  r.style.setProperty("--color-customization-foreground-2", convertHexToRGB(colors.customizationForeground2));
+  r.style.setProperty("--color-customization-background-3", convertHexToRGB(colors.customizationBackground3));
 };
 
 const convertHexToRGB = (color: string) => {

app/utils/theme/types.tsx

@@ -36,5 +36,7 @@ export type CustomizationTheme = {
     customizationBackground1: string;
     customizationBackground2: string;
     customizationForeground1: string;
+    customizationForeground2: string;
+    customizationBackground3: string;
   };
 };