diff --git a/app/components/CustomDashboardPanel.tsx b/app/components/CustomDashboardPanel.tsx
index 4c7722766..efd2df0ea 100644
--- a/app/components/CustomDashboardPanel.tsx
+++ b/app/components/CustomDashboardPanel.tsx
@@ -1,9 +1,13 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState, Ref } 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";
type CustomDashboardPanelProps = {
logo: {
@@ -55,6 +59,8 @@ export const CustomDashboardPanel = ({ logo, className, children }: CustomDashbo
{logoBackground &&
{logoBackground}
}
@@ -63,6 +69,20 @@ export const CustomDashboardPanel = ({ logo, className, children }: CustomDashbo
export const DynamicCustomDashboardPanel = ({ className }: { className: string }) => {
const customization = useCustomization();
+ const [showSidebar, setShowSidebar] = useState(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 ;
@@ -71,20 +91,47 @@ export const DynamicCustomDashboardPanel = ({ className }: { className: string }
if (customization.key === "testing") {
return ;
}
-
+ console.log("customization", customization);
const { logo, body } = customization.dashboardPanel;
+ const onButtonClick = () => {
+ if (body.action.type === "Onchain Push") {
+ setShowSidebar(true);
+ } else {
+ window.open(body.action.url, "_blank");
+ }
+ };
return (
+ {/* */}
+ {body.displayInfoTooltip && body.displayInfoTooltip.shouldDisplay && body.displayInfoTooltip.text ? (
+
+ }>
+
+
+
+
+ }
+ className={`ml-24 invisible z-10 max-w-screen-md rounded-md border border-customization-background-1 bg-background-1 text-sm text-color-1 group-hover:visible`}
+ style={styles.popper}
+ {...attributes.popper}
+ static
+ >
+ Hekki
+
+
+ ) : null}
{body.mainText}
{body.subText}
+ setShowSidebar(false)} />
);
};
diff --git a/app/components/InitiateOnChainButton.tsx b/app/components/InitiateOnChainButton.tsx
index 3a1188bc4..a62899f37 100644
--- a/app/components/InitiateOnChainButton.tsx
+++ b/app/components/InitiateOnChainButton.tsx
@@ -6,13 +6,21 @@ import React, { useState } from "react";
import { OnchainSidebar } from "./OnchainSidebar";
import { Button } from "./Button";
-const InitiateOnChainButton = ({ className }: { className?: string }) => {
+const InitiateOnChainButton = ({
+ className,
+ variant = "primary",
+ text = "Bring Passport onchain",
+}: {
+ className?: string;
+ variant?: "primary" | "secondary" | "custom";
+ text?: string;
+}) => {
const [showSidebar, setShowSidebar] = useState(false);
return (
<>
-