aesirx-analytics 2.0.0 → 2.0.1

package/dist/{Consent-7KHERFGJ.js → Consent-6SCX7LT4.js}

@@ -3,6 +3,7 @@ import {
 } from "./chunk-JQ6CXYV4.js";
 
 // src/utils/consent.ts
+import { stringMessage } from "@concordium/react-components";
 import axios from "axios";
 var agreeConsents = async (endpoint, level, uuid, consent, wallet, signature, web3id, jwt, network = "concordium") => {
   const url = `${endpoint}/consent/v1/level${level}/${uuid}`;
@@ -59,7 +60,7 @@ var getSignature = async (endpoint, address, provider, text, network = "concordi
   }
 };
 var getSignedNonce = async (nonce, address, provider) => {
-  const signature = await provider.signMessage(address, String(nonce));
+  const signature = await provider.signMessage(address, stringMessage(`${nonce}`));
   return Buffer.from(
     typeof signature === "object" && signature !== null ? JSON.stringify(signature) : signature,
     "utf-8"
@@ -96,12 +97,11 @@ var revokeConsents = async (endpoint, level, uuid, wallet, signature, web3id, jw
 };
 
 // src/Components/Consent.tsx
-import React2, { useState as useState3 } from "react";
-import { Button, Form } from "react-bootstrap";
+import React3, { useState as useState3 } from "react";
+import { Button as Button2, Form } from "react-bootstrap";
 
 // src/Hooks/useConsentStatus.ts
 import { useCallback, useContext, useEffect, useState } from "react";
-import { detectConcordiumProvider } from "@concordium/browser-wallet-api-helpers";
 
 // src/utils/Concordium.ts
 import {
@@ -184,13 +184,43 @@ var getWeb3ID = async (provider, account) => {
 
 // src/Hooks/useConsentStatus.ts
 import { toast } from "react-toastify";
-var useConsentStatus = (endpoint) => {
+import { isMobile, isDesktop, osName, OsTypes } from "react-device-detect";
+
+// src/Hooks/config.ts
+import {
+  BrowserWalletConnector,
+  CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
+  WalletConnectConnector,
+  ephemeralConnectorType
+} from "@concordium/react-components";
+var WALLET_CONNECT_OPTS = {
+  projectId: CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
+  metadata: {
+    name: "Sign Message",
+    description: "Example dApp for signing an arbitrary message.",
+    url: "#",
+    icons: ["https://walletconnect.com/walletconnect-logo.png"]
+  }
+};
+var BROWSER_WALLET = ephemeralConnectorType(BrowserWalletConnector.create);
+var WALLET_CONNECT = ephemeralConnectorType(
+  WalletConnectConnector.create.bind(void 0, WALLET_CONNECT_OPTS)
+);
+
+// src/Hooks/useConsentStatus.ts
+import {
+  MAINNET,
+  useConnection,
+  useConnect,
+  withJsonRpcClient
+} from "@concordium/react-components";
+var useConsentStatus = (endpoint, props) => {
   const [show, setShow] = useState(false);
   const [showRevoke, setShowRevoke] = useState(false);
   const [level, setLevel] = useState();
-  const [provider, setProvider] = useState(null);
   const [web3ID, setWeb3ID] = useState();
   const analyticsContext = useContext(AnalyticsContext);
+  const { activeConnector, network, connectedAccounts, genesisHashes, setActiveConnectorType } = props;
   useEffect(() => {
     const allow = sessionStorage.getItem("aesirx-analytics-allow");
     const currentUuid = sessionStorage.getItem("aesirx-analytics-uuid");
@@ -204,7 +234,7 @@ var useConsentStatus = (endpoint) => {
           if (level > 1) {
             sessionStorage.setItem("aesirx-analytics-uuid", analyticsContext.visitor_uuid);
             sessionStorage.setItem("aesirx-analytics-allow", "1");
-            setShowRevoke(true);
+            handleRevoke(true, "1");
           }
           consentList.forEach((consent) => {
             if (consent.expiration && new Date(consent.expiration) < /* @__PURE__ */ new Date()) {
@@ -214,48 +244,114 @@ var useConsentStatus = (endpoint) => {
             } else {
               sessionStorage.setItem("aesirx-analytics-uuid", analyticsContext.visitor_uuid);
               sessionStorage.setItem("aesirx-analytics-allow", "1");
+              if (consent) {
+                const revokeTier = !consent?.consent_uuid ? "1" : consent?.web3id && consent?.address ? "4" : consent?.address && !consent?.web3id ? "3" : "2";
+                handleRevoke(true, revokeTier);
+              }
             }
           });
         }
       })();
     }
   }, [analyticsContext.visitor_uuid]);
+  const { connection, setConnection, account, genesisHash } = useConnection(
+    connectedAccounts,
+    genesisHashes
+  );
+  const { connect, connectError } = useConnect(activeConnector, setConnection);
+  const [, setRpcGenesisHash] = useState();
+  const [, setRpcError] = useState("");
+  useEffect(() => {
+    if (connection) {
+      setRpcGenesisHash(void 0);
+      withJsonRpcClient(connection, async (rpc) => {
+        const status = await rpc.getConsensusStatus();
+        return status.genesisBlock;
+      }).then((hash) => {
+        const network2 = "mainnet";
+        let r = false;
+        switch (network2) {
+          default:
+            r = hash === MAINNET.genesisHash;
+        }
+        if (!r) {
+          const network3 = "mainnet";
+          throw new Error(`Please change the network to ${network3} in Wallet`);
+        }
+        setRpcGenesisHash(hash);
+        setRpcError("");
+      }).catch((err) => {
+        setRpcGenesisHash(void 0);
+        toast(err.message);
+        setRpcError(err.message);
+      });
+    }
+  }, [connection, genesisHash, network]);
+  useEffect(() => {
+    if (activeConnector) {
+      connect();
+    }
+  }, [activeConnector]);
+  useEffect(() => {
+    if (connectError) {
+      toast.error(connectError);
+    }
+  }, [connectError]);
+  useEffect(() => {
+    if (isDesktop && sessionStorage.getItem("aesirx-analytics-revoke") !== "1" && sessionStorage.getItem("aesirx-analytics-revoke") !== "2") {
+      setActiveConnectorType(BROWSER_WALLET);
+    }
+  }, []);
   useEffect(() => {
     (async () => {
       try {
         let l = level;
-        const provider2 = await detectConcordiumProvider(100);
-        if (provider2) {
-          provider2.on("accountDisconnected", () => {
-            setLevel(3);
-          });
-          provider2.on("accountChanged", () => setLevel(4));
+        if (connection) {
+          setLevel(null);
           l = 3;
           let web3ID2 = "";
-          const accountAddress = await provider2.getMostRecentlySelectedAccount();
-          if (accountAddress) {
-            web3ID2 = await getWeb3ID(provider2, accountAddress);
+          if (account) {
+            web3ID2 = await getWeb3ID(connection, account);
             if (web3ID2) {
               l = 4;
             }
           }
-          setProvider(provider2);
-          setLevel(l);
           setWeb3ID(web3ID2);
+          setLevel(l);
+        } else {
+          setLevel(level ?? 1);
         }
       } catch (error) {
         setLevel(level ?? 1);
       }
     })();
-  }, [level]);
+  }, [account]);
   const handleLevel = useCallback(
     async (_level) => {
       if (_level === 2) {
         setLevel(_level);
       } else if (_level === 3) {
         try {
-          await detectConcordiumProvider(100);
-          setLevel(_level);
+          if (isDesktop) {
+            setActiveConnectorType(BROWSER_WALLET);
+            setLevel(null);
+            if (!activeConnector) {
+              setLevel(1);
+              toast("Browser Wallet extension not detected");
+            } else {
+              setLevel(_level);
+            }
+          } else {
+            if (osName === OsTypes?.IOS && isMobile) {
+              setLevel(1);
+              toast("Wallet Connect not support on IOS");
+            } else if (isMobile) {
+              setActiveConnectorType(WALLET_CONNECT);
+              setLevel(_level);
+            } else {
+              setLevel(_level);
+            }
+          }
         } catch (error) {
           setLevel(1);
           toast("Browser Wallet extension not detected");
@@ -263,8 +359,7 @@ var useConsentStatus = (endpoint) => {
       } else if (_level === 4) {
         setLevel(null);
         try {
-          const accountAddress = await provider.connect();
-          const web3ID2 = await getWeb3ID(provider, accountAddress);
+          const web3ID2 = await getWeb3ID(connection, account);
           if (web3ID2) {
             setLevel(_level);
             setWeb3ID(web3ID2);
@@ -286,7 +381,8 @@ var useConsentStatus = (endpoint) => {
   return [
     analyticsContext.visitor_uuid,
     level,
-    provider,
+    connection,
+    account,
     show,
     setShow,
     web3ID,
@@ -1027,63 +1123,10 @@ var css = `:root {
   --aesirxconsent-form-invalid-border-color: #dc3545;
 }
 
-[data-bs-theme=dark] {
-  color-scheme: dark;
-  --aesirxconsent-body-color: #adb5bd;
-  --aesirxconsent-body-color-rgb: 173, 181, 189;
-  --aesirxconsent-body-bg: #212529;
-  --aesirxconsent-body-bg-rgb: 33, 37, 41;
-  --aesirxconsent-emphasis-color: #fff;
-  --aesirxconsent-emphasis-color-rgb: 255, 255, 255;
-  --aesirxconsent-secondary-color: rgba(173, 181, 189, 0.75);
-  --aesirxconsent-secondary-color-rgb: 173, 181, 189;
-  --aesirxconsent-secondary-bg: #343a40;
-  --aesirxconsent-secondary-bg-rgb: 52, 58, 64;
-  --aesirxconsent-tertiary-color: rgba(173, 181, 189, 0.5);
-  --aesirxconsent-tertiary-color-rgb: 173, 181, 189;
-  --aesirxconsent-tertiary-bg: #2b3035;
-  --aesirxconsent-tertiary-bg-rgb: 43, 48, 53;
-  --aesirxconsent-primary-text-emphasis: #6ea8fe;
-  --aesirxconsent-secondary-text-emphasis: #a7acb1;
-  --aesirxconsent-success-text-emphasis: #76d1bf;
-  --aesirxconsent-info-text-emphasis: #6edff6;
-  --aesirxconsent-warning-text-emphasis: #ffda6a;
-  --aesirxconsent-danger-text-emphasis: #ea868f;
-  --aesirxconsent-light-text-emphasis: #f8f9fa;
-  --aesirxconsent-dark-text-emphasis: #dee2e6;
-  --aesirxconsent-primary-bg-subtle: #031633;
-  --aesirxconsent-secondary-bg-subtle: #161719;
-  --aesirxconsent-success-bg-subtle: #05241e;
-  --aesirxconsent-info-bg-subtle: #032830;
-  --aesirxconsent-warning-bg-subtle: #332701;
-  --aesirxconsent-danger-bg-subtle: #2c0b0e;
-  --aesirxconsent-light-bg-subtle: #343a40;
-  --aesirxconsent-dark-bg-subtle: #1a1d20;
-  --aesirxconsent-primary-border-subtle: #084298;
-  --aesirxconsent-secondary-border-subtle: #41464b;
-  --aesirxconsent-success-border-subtle: #106b59;
-  --aesirxconsent-info-border-subtle: #087990;
-  --aesirxconsent-warning-border-subtle: #997404;
-  --aesirxconsent-danger-border-subtle: #842029;
-  --aesirxconsent-light-border-subtle: #495057;
-  --aesirxconsent-dark-border-subtle: #343a40;
-  --aesirxconsent-heading-color: inherit;
-  --aesirxconsent-link-color: #6ea8fe;
-  --aesirxconsent-link-hover-color: #8bb9fe;
-  --aesirxconsent-link-color-rgb: 110, 168, 254;
-  --aesirxconsent-link-hover-color-rgb: 139, 185, 254;
-  --aesirxconsent-code-color: #e685b5;
-  --aesirxconsent-border-color: #495057;
-  --aesirxconsent-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --aesirxconsent-form-valid-color: #75b798;
-  --aesirxconsent-form-valid-border-color: #75b798;
-  --aesirxconsent-form-invalid-color: #ea868f;
-  --aesirxconsent-form-invalid-border-color: #ea868f;
-}
-
 .aesirxconsent {
   /* rtl:begin:remove */
   /* rtl:end:remove */
+  color: #5f5e70;
 }
 .aesirxconsent .offcanvas, .aesirxconsent .offcanvas-xxl, .aesirxconsent .offcanvas-xl, .aesirxconsent .offcanvas-lg, .aesirxconsent .offcanvas-md, .aesirxconsent .offcanvas-sm {
   --aesirxconsent-offcanvas-zindex: 1045;
@@ -1977,9 +2020,6 @@ var css = `:root {
 .aesirxconsent .btn-close-white {
   filter: var(--aesirxconsent-btn-close-white-filter);
 }
-.aesirxconsent [data-bs-theme=dark] .btn-close {
-  filter: var(--aesirxconsent-btn-close-white-filter);
-}
 .aesirxconsent .clearfix::after {
   display: block;
   clear: both;
@@ -1987,35 +2027,35 @@ var css = `:root {
 }
 .aesirxconsent .text-bg-primary {
   color: #fff;
-  background-color: RGBA(13, 110, 253, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-primary-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-secondary {
   color: #fff;
-  background-color: RGBA(108, 117, 125, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-secondary-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-success {
   color: #000;
-  background-color: RGBA(26, 179, 148, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-success-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-info {
   color: #000;
-  background-color: RGBA(13, 202, 240, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-info-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-warning {
   color: #000;
-  background-color: RGBA(255, 193, 7, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-warning-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-danger {
   color: #fff;
-  background-color: RGBA(220, 53, 69, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-danger-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-light {
   color: #000;
-  background-color: RGBA(248, 249, 250, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-light-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .text-bg-dark {
   color: #fff;
-  background-color: RGBA(33, 37, 41, var(--aesirxconsent-bg-opacity, 1));
+  background-color: RGBA(var(--aesirxconsent-dark-rgb), var(--aesirxconsent-bg-opacity, 1));
 }
 .aesirxconsent .link-primary {
   color: RGBA(var(--aesirxconsent-primary-rgb), var(--aesirxconsent-link-opacity, 1));
@@ -2272,7 +2312,7 @@ var css = `:root {
 .aesirxconsent .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: var(--aesirxconsent-border-width);
   min-height: 1em;
   background-color: currentcolor;
   opacity: 0.25;
@@ -7598,9 +7638,64 @@ var css = `:root {
     display: none;
   }
 }
+.aesirxconsent .btn.text-white {
+  color: #fff;
+}
+.aesirxconsent .btn-dark {
+  --aesirxconsent-btn-color: #fff;
+  --aesirxconsent-btn-bg: #222328;
+  --aesirxconsent-btn-border-color: #222328;
+  --aesirxconsent-btn-hover-color: #fff;
+  --aesirxconsent-btn-hover-bg: #222328;
+  --aesirxconsent-btn-hover-border-color: #222328;
+  --aesirxconsent-btn-focus-shadow-rgb: 67, 68, 72;
+  --aesirxconsent-btn-active-color: #fff;
+  --aesirxconsent-btn-active-bg: #1b1c20;
+  --aesirxconsent-btn-active-border-color: #1a1a1e;
+  --aesirxconsent-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --aesirxconsent-btn-disabled-color: #fff;
+  --aesirxconsent-btn-disabled-bg: #222328;
+  --aesirxconsent-btn-disabled-border-color: #222328;
+}
+.aesirxconsent .btn-success-outline {
+  --aesirxconsent-btn-color: #1ab394;
+  --aesirxconsent-btn-bg: transparent;
+  --aesirxconsent-btn-border-color: #1ab394;
+  --aesirxconsent-btn-hover-color: #1ab394;
+  --aesirxconsent-btn-hover-bg: transparent;
+  --aesirxconsent-btn-hover-border-color: #1ab394;
+  --aesirxconsent-btn-focus-shadow-rgb: 26, 179, 148;
+  --aesirxconsent-btn-active-color: #000;
+  --aesirxconsent-btn-active-bg: rgba(255, 255, 255, 0.2);
+  --aesirxconsent-btn-active-border-color: #31bb9f;
+  --aesirxconsent-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --aesirxconsent-btn-disabled-color: #fff;
+  --aesirxconsent-btn-disabled-bg: transparent;
+  --aesirxconsent-btn-disabled-border-color: #1ab394;
+  color: #1ab394;
+}
 .aesirxconsent .btn-success:hover {
   color: var(--aesirxconsent-white);
 }
+.aesirxconsent .toast {
+  --aesirxconsent-toast-zindex: 1049;
+  border: 0;
+  box-shadow: none;
+}
+.aesirxconsent .toast .toast-body {
+  border: var(--aesirxconsent-toast-border-width) solid var(--aesirxconsent-toast-border-color);
+  box-shadow: var(--aesirxconsent-toast-box-shadow);
+  border-radius: var(--aesirxconsent-toast-border-radius);
+}
+@media (max-width: 991.98px) {
+  .aesirxconsent .toast .toast-body button {
+    font-size: 14px;
+  }
+}
+.aesirxconsent .toast-container {
+  box-sizing: border-box;
+  --aesirxconsent-toast-zindex: 1049;
+}
 .aesirxconsent .status-tier {
   width: 18px;
   height: 18px;
@@ -7623,46 +7718,34 @@ var css = `:root {
   border-radius: 0.5rem;
   min-width: 120px;
 }
-.aesirxconsent .ssoBtnWrapper .position-fixed {
-  position: absolute !important;
-  background: transparent !important;
-}
-.aesirxconsent .ssoBtnWrapper .position-fixed > span {
-  width: 25.7143px !important;
-  height: 25.7143px !important;
+.aesirxconsent .revoke-toast {
+  width: 500px;
 }
-.aesirxconsent .ssoBtnWrapper .position-fixed > span > span {
-  width: 2.85714px !important;
-  height: 2.85714px !important;
-  top: 8.57143px !important;
-  background-color: rgb(255, 255, 255) !important;
+.aesirxconsent .revoke-toast .toast-body .minimize-revoke {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
 }
-.aesirxconsent .ssoBtnWrapper .position-fixed > span > span + span {
-  width: 20px !important;
-  height: 20px !important;
-  border: 2.85714px solid rgb(255, 255, 255) !important;
-  background: transparent !important;
-  top: 0 !important;
+.aesirxconsent .revoke-toast .toast-body .manage-consent {
+  margin-right: 10px;
 }
-.aesirxconsent .revoke-toast {
+.aesirxconsent .toast.minimize {
   width: auto;
 }
-.aesirxconsent .revoke-toast.expand {
-  width: 480px;
-}
-.aesirxconsent .revoke-toast .toast-body .revoke-wrapper {
+.aesirxconsent .minimize-shield-wrapper {
   border-radius: 0.5rem;
   position: relative;
   overflow: hidden;
 }
-.aesirxconsent .revoke-toast .toast-body .revoke-wrapper .cover-img {
+.aesirxconsent .minimize-shield-wrapper .cover-img {
   z-index: -1;
   position: absolute;
   object-fit: cover;
   top: 0;
   left: 0;
 }
-.aesirxconsent .revoke-toast .toast-body .revoke-wrapper .revoke-small {
+.aesirxconsent .minimize-shield-wrapper .minimize-shield {
   cursor: pointer;
   padding: 11.5px 10px;
   display: flex;
@@ -7670,22 +7753,91 @@ var css = `:root {
   justify-content: center;
   color: #fff;
 }
-.aesirxconsent .revoke-toast .toast-body .revoke-wrapper .revoke-small img {
+.aesirxconsent .minimize-shield-wrapper .minimize-shield img {
   margin-right: 5px;
 }
-.aesirxconsent .revoke-toast .toast-body .revoke-wrapper .text {
+.aesirxconsent .minimize-shield-wrapper .text {
   font-weight: 500;
 }
 .aesirxconsent .read-more {
   text-align: right;
 }
 .aesirxconsent .read-more .read-more-btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   color: #132342;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   padding-top: 10px;
+}
+.aesirxconsent .read-more .read-more-btn img.revert {
+  transform: rotate(180deg);
+}
+.aesirxconsent .loading-status {
+  margin-bottom: 10px;
+}
+.aesirxconsent .loading-status .btn:disabled {
+  opacity: 1;
+}
+.aesirxconsent .loading-status .text {
+  max-width: calc(100% - 1.75rem);
+}
+.aesirxconsent .lightning {
+  -webkit-filter: brightness(8);
+  filter: brightness(8);
+  -o-filter: brightness(8);
+  -moz-filter: brightness(8);
+  opacity: 0;
+}
+.aesirxconsent .flash-effect {
+  -webkit-animation: flash ease-out 5s infinite;
+  -moz-animation: flash ease-out 5s infinite;
+  animation: flash ease-out 5s infinite;
+}
+@-webkit-keyframes flash {
+  from {
+    opacity: 0;
+  }
+  20% {
+    opacity: 0;
+  }
+  22% {
+    opacity: 0.6;
+  }
+  24% {
+    opacity: 0.2;
+  }
+  26% {
+    opacity: 0.9;
+  }
+  30% {
+    opacity: 0;
+  }
+}
+@keyframes flash {
+  from {
+    opacity: 0;
+  }
+  20% {
+    opacity: 0;
+  }
+  22% {
+    opacity: 0.6;
+  }
+  24% {
+    opacity: 0.2;
+  }
+  26% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+  }
+}
+
+.aesirxsso {
+  color: #5f5e70;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 
@@ -7760,12 +7912,29 @@ var terms = [
   }
 ];
 var TermsComponent = ({ children, level, handleLevel }) => {
-  const handleReadmore = () => {
-    setShowReadmore(true);
+  const handleReadmore = (status) => {
+    setShowReadmore(status);
   };
   const [showReadmore, setShowReadmore] = useState2(false);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, terms.map(
-    (term, key) => term.level === level && /* @__PURE__ */ React.createElement(Fragment, { key }, /* @__PURE__ */ React.createElement("div", { className: "rounded-top d-flex justify-content-between bg-light p-3 fw-bold" }, /* @__PURE__ */ React.createElement("div", null, term.name), /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center" }, /* @__PURE__ */ React.createElement("div", { className: `status-tier tier-${term.level} rounded-circle` }), term.tier, " - ", term.levelname)), /* @__PURE__ */ React.createElement("div", { className: "p-3 bg-white" }, /* @__PURE__ */ React.createElement("span", { className: "fw-bold" }, term.content), " ", /* @__PURE__ */ React.createElement("span", { className: "fw-light" }, term.term), !showReadmore && /* @__PURE__ */ React.createElement("div", { className: "read-more" }, /* @__PURE__ */ React.createElement("div", { className: "read-more-btn", onClick: handleReadmore }, "Read more ", /* @__PURE__ */ React.createElement("img", { src: arrow_default, className: "ms-1" })))), /* @__PURE__ */ React.createElement("div", { className: "rounded-bottom position-relative overflow-hidden text-white" }, /* @__PURE__ */ React.createElement("img", { className: "position-absolute h-100 w-100 object-fit-cover", src: bg_default }), /* @__PURE__ */ React.createElement("div", { className: "position-relative p-3" }, showReadmore && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center" }, term.logos.map((logo, i) => /* @__PURE__ */ React.createElement(Fragment, { key: i }, /* @__PURE__ */ React.createElement("img", { className: "me-2", src: logo, alt: term.levelname })))), /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-start my-3" }, /* @__PURE__ */ React.createElement("img", { src: upgrade_default }), /* @__PURE__ */ React.createElement("div", { className: "ms-3" }, term.upgrade && /* @__PURE__ */ React.createElement(
+    (term, key) => term.level === level && /* @__PURE__ */ React.createElement(Fragment, { key }, /* @__PURE__ */ React.createElement("div", { className: "rounded-top d-flex justify-content-between bg-light p-3 fw-bold flex-wrap" }, /* @__PURE__ */ React.createElement("div", null, term.name), /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center" }, /* @__PURE__ */ React.createElement("div", { className: `status-tier tier-${term.level} rounded-circle` }), term.tier, " - ", term.levelname)), /* @__PURE__ */ React.createElement("div", { className: "p-3 bg-white" }, /* @__PURE__ */ React.createElement("span", { className: "fw-bold" }, term.content), " ", /* @__PURE__ */ React.createElement("span", { className: "fw-light" }, term.term), /* @__PURE__ */ React.createElement("div", { className: "read-more" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "read-more-btn",
+        onClick: () => {
+          handleReadmore(!showReadmore ? true : false);
+        }
+      },
+      !showReadmore ? "Show details" : "Hide details",
+      " ",
+      /* @__PURE__ */ React.createElement("img", { src: arrow_default, className: `ms-1 ${showReadmore ? "revert" : ""}` })
+    ))), /* @__PURE__ */ React.createElement("div", { className: "rounded-bottom position-relative overflow-hidden text-white" }, /* @__PURE__ */ React.createElement("img", { className: "position-absolute h-100 w-100 object-fit-cover", src: bg_default }), /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        className: "position-absolute h-100 w-100 object-fit-cover lightning flash-effect",
+        src: bg_default
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "position-relative p-3" }, showReadmore && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center" }, term.logos.map((logo, i) => /* @__PURE__ */ React.createElement(Fragment, { key: i }, /* @__PURE__ */ React.createElement("img", { className: "me-2", src: logo, alt: term.levelname })))), /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-start my-3" }, /* @__PURE__ */ React.createElement("img", { src: upgrade_default }), /* @__PURE__ */ React.createElement("div", { className: "ms-3" }, term.upgrade && /* @__PURE__ */ React.createElement(
       "a",
       {
         className: "text-white",
@@ -7784,16 +7953,92 @@ import { ToastContainer, toast as toast2 } from "react-toastify";
 var yes_default = 'data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M9 1C7.41775 1 5.87103 1.46919 4.55544 2.34824C3.23985 3.22729 2.21447 4.47672 1.60897 5.93853C1.00347 7.40034 0.84504 9.00887 1.15372 10.5607C1.4624 12.1126 2.22433 13.538 3.34315 14.6569C4.46197 15.7757 5.88743 16.5376 7.43928 16.8463C8.99113 17.155 10.5997 16.9965 12.0615 16.391C13.5233 15.7855 14.7727 14.7602 15.6518 13.4446C16.5308 12.129 17 10.5823 17 9C17 6.87827 16.1571 4.84344 14.6569 3.34315C13.1566 1.84285 11.1217 1 9 1V1ZM9 16C7.61553 16 6.26216 15.5895 5.11101 14.8203C3.95987 14.0511 3.06266 12.9579 2.53285 11.6788C2.00303 10.3997 1.86441 8.99223 2.13451 7.63437C2.4046 6.2765 3.07129 5.02922 4.05026 4.05025C5.02922 3.07128 6.2765 2.4046 7.63437 2.1345C8.99224 1.86441 10.3997 2.00303 11.6788 2.53284C12.9579 3.06266 14.0511 3.95986 14.8203 5.11101C15.5895 6.26215 16 7.61553 16 9C16 10.8565 15.2625 12.637 13.9498 13.9497C12.637 15.2625 10.8565 16 9 16Z" fill="white"/>%0A<path d="M13.9985 6.04969C13.9048 5.95657 13.7781 5.9043 13.646 5.9043C13.5139 5.9043 13.3872 5.95657 13.2935 6.04969L7.7435 11.5747L4.7435 8.57469C4.652 8.4759 4.52501 8.4175 4.39045 8.41234C4.25589 8.40719 4.1248 8.45569 4.026 8.54719C3.92721 8.63869 3.86881 8.76569 3.86365 8.90025C3.8585 9.03481 3.907 9.1659 3.9985 9.26469L7.7435 12.9997L13.9985 6.75969C14.0454 6.71321 14.0826 6.65791 14.108 6.59698C14.1333 6.53605 14.1464 6.4707 14.1464 6.40469C14.1464 6.33869 14.1333 6.27333 14.108 6.21241C14.0826 6.15148 14.0454 6.09618 13.9985 6.04969Z" fill="white"/>%0A</svg>%0A';
 
 // src/Assets/no.svg
-var no_default = 'data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M9 1.5C13.1421 1.5 16.5 4.85786 16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5ZM9 2.625C5.47918 2.625 2.625 5.47918 2.625 9C2.625 12.5208 5.47918 15.375 9 15.375C12.5208 15.375 15.375 12.5208 15.375 9C15.375 5.47918 12.5208 2.625 9 2.625ZM11.5847 6.29779L11.6477 6.35225C11.8474 6.55195 11.8656 6.86445 11.7022 7.08466L11.6477 7.14775L9.79575 9L11.6477 10.8523C11.8474 11.052 11.8656 11.3645 11.7022 11.5847L11.6477 11.6477C11.448 11.8474 11.1355 11.8656 10.9153 11.7022L10.8523 11.6477L9 9.79575L7.14775 11.6477C6.94805 11.8474 6.63555 11.8656 6.41534 11.7022L6.35225 11.6477C6.15255 11.448 6.1344 11.1355 6.29779 10.9153L6.35225 10.8523L8.20425 9L6.35225 7.14775C6.15255 6.94805 6.1344 6.63555 6.29779 6.41534L6.35225 6.35225C6.55195 6.15255 6.86445 6.1344 7.08466 6.29779L7.14775 6.35225L9 8.20425L10.8523 6.35225C11.052 6.15255 11.3645 6.1344 11.5847 6.29779Z" fill="white"/>%0A</svg>%0A';
+var no_default = 'data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M9 2C13.1421 2 16.5 5.35786 16.5 9.5C16.5 13.6421 13.1421 17 9 17C4.85786 17 1.5 13.6421 1.5 9.5C1.5 5.35786 4.85786 2 9 2ZM9 3.125C5.47918 3.125 2.625 5.97918 2.625 9.5C2.625 13.0208 5.47918 15.875 9 15.875C12.5208 15.875 15.375 13.0208 15.375 9.5C15.375 5.97918 12.5208 3.125 9 3.125ZM11.5847 6.79779L11.6477 6.85225C11.8474 7.05195 11.8656 7.36445 11.7022 7.58466L11.6477 7.64775L9.79575 9.5L11.6477 11.3523C11.8474 11.552 11.8656 11.8645 11.7022 12.0847L11.6477 12.1477C11.448 12.3474 11.1355 12.3656 10.9153 12.2022L10.8523 12.1477L9 10.2957L7.14775 12.1477C6.94805 12.3474 6.63555 12.3656 6.41534 12.2022L6.35225 12.1477C6.15255 11.948 6.1344 11.6355 6.29779 11.4153L6.35225 11.3523L8.20425 9.5L6.35225 7.64775C6.15255 7.44805 6.1344 7.13555 6.29779 6.91534L6.35225 6.85225C6.55195 6.65255 6.86445 6.6344 7.08466 6.79779L7.14775 6.85225L9 8.70425L10.8523 6.85225C11.052 6.65255 11.3645 6.6344 11.5847 6.79779Z" fill="%231AB394"/>%0A</svg>%0A';
 
 // src/Components/Consent.tsx
 import ContentLoader from "react-content-loader";
-import { SSOButton, SSOContextProvider } from "aesirx-sso";
+import { SSOButton } from "aesirx-sso";
+import { MAINNET as MAINNET2, WithWalletConnector } from "@concordium/react-components";
+import { OsTypes as OsTypes2, isMobile as isMobile2, osName as osName2 } from "react-device-detect";
+
+// src/Components/LoadingStatus.tsx
+import React2 from "react";
+import { Button } from "react-bootstrap";
+var LoadingStatus = ({ loading }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, loading === "connect" ? /* @__PURE__ */ React2.createElement("div", { className: "loading-status" }, /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "dark",
+      disabled: true,
+      className: "d-flex align-items-center justify-content-center text-white w-100"
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        className: "spinner-border spinner-border-sm me-1",
+        role: "status",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ React2.createElement("span", { className: "text" }, "Please connect your Concordium wallet")
+  )) : loading === "sign" ? /* @__PURE__ */ React2.createElement("div", { className: "loading-status" }, /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "dark",
+      disabled: true,
+      className: "d-flex align-items-center justify-content-center text-white w-100"
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        className: "spinner-border spinner-border-sm me-1",
+        role: "status",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ React2.createElement("span", { className: "text" }, "Please sign the message on your wallet twice and wait for it to be saved.")
+  )) : loading === "saving" ? /* @__PURE__ */ React2.createElement("div", { className: "loading-status" }, /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "dark",
+      disabled: true,
+      className: "d-flex align-items-center justify-content-center text-white w-100"
+    },
+    /* @__PURE__ */ React2.createElement(
+      "span",
+      {
+        className: "spinner-border spinner-border-sm me-1",
+        role: "status",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ React2.createElement("span", { className: "text" }, "Saving...")
+  )) : /* @__PURE__ */ React2.createElement(React2.Fragment, null));
+};
+
+// src/Components/Consent.tsx
 var ConsentComponent = ({ endpoint }) => {
-  const [uuid, level, provider, show, setShow, web3ID, handleLevel, showRevoke, handleRevoke] = useConsentStatus_default(endpoint);
+  return /* @__PURE__ */ React3.createElement(WithWalletConnector, { network: MAINNET2 }, (props) => /* @__PURE__ */ React3.createElement(ConsentComponentApp, { ...props, endpoint }));
+};
+var ConsentComponentApp = (props) => {
+  const { endpoint, setActiveConnectorType } = props;
+  const [
+    uuid,
+    level,
+    connection,
+    account,
+    show,
+    setShow,
+    web3ID,
+    handleLevel,
+    showRevoke,
+    handleRevoke
+  ] = useConsentStatus_default(endpoint, props);
   const [consents, setConsents] = useState3([1, 2]);
   const [loading, setLoading] = useState3("done");
+  const [showExpandConsent, setShowExpandConsent] = useState3(true);
   const [showExpandRevoke, setShowExpandRevoke] = useState3(false);
+  const [showBackdrop, setShowBackdrop] = useState3(true);
   const handleChange = async ({ target: { value } }) => {
     if (consents.indexOf(parseInt(value)) === -1) {
       setConsents([...consents, ...[parseInt(value)]]);
@@ -7805,12 +8050,10 @@ var ConsentComponent = ({ endpoint }) => {
     try {
       if (level > 2) {
         setLoading("connect");
-        const address = await provider.connect();
         setLoading("sign");
-        const signature = await getSignature(endpoint, address, provider, "Give consent:{}");
+        const signature = await getSignature(endpoint, account, connection, "Give consent:{}");
         setLoading("saving");
-        await agreeConsents(endpoint, level, uuid, consents, address, signature, web3ID);
-        handleRevoke(true, level);
+        await agreeConsents(endpoint, level, uuid, consents, account, signature, web3ID);
       } else {
         setLoading("saving");
         consents.forEach(async (consent) => {
@@ -7821,10 +8064,12 @@ var ConsentComponent = ({ endpoint }) => {
       sessionStorage.setItem("aesirx-analytics-allow", "1");
       setShow(false);
       setLoading("done");
+      handleRevoke(true, level);
+      setShowBackdrop(false);
     } catch (error) {
-      setShow(false);
+      handleNotAllow();
       setLoading("done");
-      toast2.error(error.message);
+      toast2.error(error?.response?.data?.error ?? error.message);
     }
   };
   const onGetData = async (response) => {
@@ -7838,13 +8083,13 @@ var ConsentComponent = ({ endpoint }) => {
     } catch (error) {
       setShow(false);
       setLoading("done");
-      toast2.error(error.message);
+      toast2.error(error?.response?.data?.error ?? error.message);
     }
   };
   const handleNotAllow = () => {
     sessionStorage.setItem("aesirx-analytics-uuid", uuid);
-    sessionStorage.setItem("aesirx-analytics-allow", "0");
-    setShow(false);
+    setShowExpandConsent(false);
+    setShowBackdrop(false);
   };
   const handleRevokeBtn = async () => {
     const levelRevoke = sessionStorage.getItem("aesirx-analytics-revoke");
@@ -7852,9 +8097,8 @@ var ConsentComponent = ({ endpoint }) => {
       if (levelRevoke) {
         if (parseInt(levelRevoke) > 2) {
           setLoading("connect");
-          const address = await provider.connect();
           setLoading("sign");
-          const signature = await getSignature(endpoint, address, provider, "Revoke consent:{}");
+          const signature = await getSignature(endpoint, account, connection, "Revoke consent:{}");
           setLoading("saving");
           const consentList = await getConsents(endpoint, uuid);
           consentList.forEach(async (consent) => {
@@ -7862,12 +8106,13 @@ var ConsentComponent = ({ endpoint }) => {
               endpoint,
               levelRevoke,
               consent?.consent_uuid,
-              address,
+              account,
               signature,
               web3ID
             );
           });
           setLoading("done");
+          handleRevoke(false);
         } else {
           setLoading("saving");
           const consentList = await getConsents(endpoint, uuid);
@@ -7882,39 +8127,54 @@ var ConsentComponent = ({ endpoint }) => {
               sessionStorage.getItem("aesirx-analytics-jwt")
             );
           });
-          sessionStorage.removeItem("aesirx-analytics-jwt");
           setLoading("done");
+          handleRevoke(false);
         }
+        setShowExpandConsent(false);
+        setShow(true);
+        setShowBackdrop(false);
+        sessionStorage.removeItem("aesirx-analytics-allow");
       }
-      handleRevoke(false);
     } catch (error) {
       setLoading("done");
-      handleRevoke(false);
-      toast2.error(error.message);
+      toast2.error(error?.response?.data?.error ?? error.message);
     }
   };
-  return /* @__PURE__ */ React2.createElement("div", { className: "aesirxconsent" }, /* @__PURE__ */ React2.createElement(ToastContainer, null), /* @__PURE__ */ React2.createElement("div", { className: `offcanvas-backdrop fade ${show ? "show" : "d-none"}` }), /* @__PURE__ */ React2.createElement("div", { tabIndex: -1, className: `toast-container position-fixed bottom-0 end-0 p-3` }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: "aesirxconsent" }, /* @__PURE__ */ React3.createElement(ToastContainer, null), /* @__PURE__ */ React3.createElement("div", { className: `offcanvas-backdrop fade ${showBackdrop && show ? "show" : "d-none"}` }), /* @__PURE__ */ React3.createElement("div", { tabIndex: -1, className: `toast-container position-fixed bottom-0 end-0 p-3` }, /* @__PURE__ */ React3.createElement(
     "div",
     {
-      className: `toast revoke-toast ${showRevoke || sessionStorage.getItem("aesirx-analytics-revoke") && parseInt(sessionStorage.getItem("aesirx-analytics-revoke")) > 1 ? "show" : ""} ${showExpandRevoke ? "expand" : ""}`
+      className: `toast revoke-toast ${showRevoke || sessionStorage.getItem("aesirx-analytics-revoke") && sessionStorage.getItem("aesirx-analytics-revoke") !== "0" ? "show" : ""} ${showExpandRevoke ? "" : "minimize"}`
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "toast-body p-0 " }, /* @__PURE__ */ React2.createElement("div", { className: "revoke-wrapper position-relative" }, !showExpandRevoke && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(LoadingStatus, { loading }),
+    /* @__PURE__ */ React3.createElement("div", { className: "toast-body p-0 " }, /* @__PURE__ */ React3.createElement("div", { className: "revoke-wrapper minimize-shield-wrapper position-relative" }, !showExpandRevoke && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
       "img",
       {
         className: "cover-img position-absolute h-100 w-100 object-fit-cover",
         src: bg_default
       }
-    ), /* @__PURE__ */ React2.createElement(
+    ), /* @__PURE__ */ React3.createElement(
       "div",
       {
-        className: "revoke-small",
+        className: "minimize-shield",
         onClick: () => {
+          if (osName2 !== OsTypes2?.IOS && isMobile2 && !connection && sessionStorage.getItem("aesirx-analytics-revoke") && parseInt(sessionStorage.getItem("aesirx-analytics-revoke")) > 2) {
+            setActiveConnectorType(WALLET_CONNECT);
+          }
           setShowExpandRevoke(true);
         }
       },
-      /* @__PURE__ */ React2.createElement("img", { src: privacy_default, alt: "Shield of Privacy" }),
+      /* @__PURE__ */ React3.createElement("img", { src: privacy_default, alt: "Shield of Privacy" }),
       "Shield of Privacy"
-    )), showExpandRevoke && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: "p-3 bg-white text" }, "You can revoke consent for your data to be used anytime. Go to", " ", /* @__PURE__ */ React2.createElement(
+    )), showExpandRevoke && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "minimize-revoke",
+        onClick: () => {
+          setShowExpandRevoke(false);
+        }
+      },
+      /* @__PURE__ */ React3.createElement("img", { src: no_default })
+    ), /* @__PURE__ */ React3.createElement("div", { className: "p-3 bg-white text" }, "You can revoke your consent for data usage at any time. ", /* @__PURE__ */ React3.createElement("br", null), "Go to", " ", /* @__PURE__ */ React3.createElement(
       "a",
       {
         href: "https://nft.web3id.aesirx.io",
@@ -7923,70 +8183,47 @@ var ConsentComponent = ({ endpoint }) => {
         rel: "noreferrer"
       },
       "link"
-    ), " ", "for more information."), /* @__PURE__ */ React2.createElement("div", { className: "rounded-bottom position-relative overflow-hidden text-white" }, /* @__PURE__ */ React2.createElement(
+    ), " ", "for more information."), /* @__PURE__ */ React3.createElement("div", { className: "rounded-bottom position-relative overflow-hidden text-white" }, /* @__PURE__ */ React3.createElement(
       "img",
       {
         className: "cover-img position-absolute h-100 w-100 object-fit-cover",
         src: bg_default
       }
-    ), /* @__PURE__ */ React2.createElement("div", { className: "position-relative p-3" }, /* @__PURE__ */ React2.createElement("div", { className: "d-flex align-items-center justify-content-between flex-wrap" }, /* @__PURE__ */ React2.createElement("div", { className: "me-2" }, /* @__PURE__ */ React2.createElement("img", { src: privacy_default, alt: "Shield of Privacy" }), " Shield of Privacy"), loading === "done" ? /* @__PURE__ */ React2.createElement(
-      Button,
+    ), /* @__PURE__ */ React3.createElement("div", { className: "position-relative p-3" }, /* @__PURE__ */ React3.createElement("div", { className: "d-flex align-items-center justify-content-between flex-wrap" }, /* @__PURE__ */ React3.createElement("div", { className: "me-2" }, /* @__PURE__ */ React3.createElement("img", { src: privacy_default, alt: "Shield of Privacy" }), " Shield of Privacy"), sessionStorage.getItem("aesirx-analytics-revoke") !== "1" && /* @__PURE__ */ React3.createElement("div", { className: "d-flex align-items-center" }, /* @__PURE__ */ React3.createElement(
+      "a",
+      {
+        className: "text-success text-decoration-underline manage-consent",
+        href: "https://dapp.web3id.aesirx.io/revoke-consent",
+        target: "_blank",
+        rel: "noreferrer"
+      },
+      "Manage Consent"
+    ), loading === "done" ? /* @__PURE__ */ React3.createElement(
+      Button2,
       {
         variant: "success",
         onClick: handleRevokeBtn,
         className: "text-white d-flex align-items-center revoke-btn"
       },
       "Revoke Consent"
-    ) : loading === "connect" ? /* @__PURE__ */ React2.createElement(
-      Button,
-      {
-        variant: "success",
-        disabled: true,
-        className: "d-flex align-items-center text-white"
-      },
-      /* @__PURE__ */ React2.createElement(
-        "span",
-        {
-          className: "spinner-border spinner-border-sm me-1",
-          role: "status",
-          "aria-hidden": "true"
-        }
-      ),
-      "Please connect your Concordium wallet"
-    ) : loading === "sign" ? /* @__PURE__ */ React2.createElement(
-      Button,
-      {
-        variant: "success",
-        disabled: true,
-        className: "d-flex align-items-center text-white"
-      },
-      /* @__PURE__ */ React2.createElement(
-        "span",
-        {
-          className: "spinner-border spinner-border-sm me-1",
-          role: "status",
-          "aria-hidden": "true"
-        }
-      ),
-      "Please sign the message on your wallet twice and wait for it to be saved."
-    ) : /* @__PURE__ */ React2.createElement(
-      Button,
-      {
-        variant: "success",
-        disabled: true,
-        className: "d-flex align-items-center text-white"
-      },
-      /* @__PURE__ */ React2.createElement(
-        "span",
-        {
-          className: "spinner-border spinner-border-sm me-1",
-          role: "status",
-          "aria-hidden": "true"
-        }
-      ),
-      "Saving..."
-    )))))))
-  )), /* @__PURE__ */ React2.createElement("div", { tabIndex: -1, className: `toast-container position-fixed bottom-0 end-0 p-3` }, /* @__PURE__ */ React2.createElement("div", { className: `toast ${show ? "show" : ""}` }, /* @__PURE__ */ React2.createElement(SSOContextProvider, null, /* @__PURE__ */ React2.createElement("div", { className: "toast-body p-0" }, level ? /* @__PURE__ */ React2.createElement(TermsComponent, { level, handleLevel }, /* @__PURE__ */ React2.createElement(Form, null, /* @__PURE__ */ React2.createElement(
+    ) : /* @__PURE__ */ React3.createElement(React3.Fragment, null))))))))
+  )), /* @__PURE__ */ React3.createElement("div", { tabIndex: -1, className: `toast-container position-fixed bottom-0 end-0 p-3` }, /* @__PURE__ */ React3.createElement("div", { className: `toast ${show ? "show" : ""} ${showExpandConsent ? "" : "minimize"}` }, /* @__PURE__ */ React3.createElement(LoadingStatus, { loading }), /* @__PURE__ */ React3.createElement("div", { className: "toast-body p-0" }, !showExpandConsent ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { className: "minimize-shield-wrapper position-relative" }, /* @__PURE__ */ React3.createElement(
+    "img",
+    {
+      className: "cover-img position-absolute h-100 w-100 object-fit-cover",
+      src: bg_default
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: "minimize-shield",
+      onClick: () => {
+        setShowExpandConsent(true);
+      }
+    },
+    /* @__PURE__ */ React3.createElement("img", { src: privacy_default, alt: "Shield of Privacy" }),
+    "Shield of Privacy"
+  ))) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, level ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(TermsComponent, { level, handleLevel }, /* @__PURE__ */ React3.createElement(Form, { className: "mb-0" }, /* @__PURE__ */ React3.createElement(
     Form.Check,
     {
       checked: consents.includes(1),
@@ -7996,7 +8233,7 @@ var ConsentComponent = ({ endpoint }) => {
       onChange: handleChange,
       className: "d-none"
     }
-  ), /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement(
     Form.Check,
     {
       checked: consents.includes(2),
@@ -8006,81 +8243,33 @@ var ConsentComponent = ({ endpoint }) => {
       onChange: handleChange,
       className: "d-none"
     }
-  ), /* @__PURE__ */ React2.createElement("div", { className: "d-flex mt-2 justify-content-end" }, loading === "done" ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, level === 2 ? /* @__PURE__ */ React2.createElement("div", { className: "ssoBtnWrapper me-1 bg-success" }, /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement("div", { className: "d-flex justify-content-end" }, loading === "done" ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, level === 2 ? /* @__PURE__ */ React3.createElement("div", { className: "ssoBtnWrapper me-1 bg-success" }, /* @__PURE__ */ React3.createElement(
     SSOButton,
     {
       className: "btn btn-success text-white d-flex align-items-center",
-      text: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("img", { src: yes_default, className: "me-2" }), "Yes, I consent"),
+      text: /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("img", { src: yes_default, className: "me-1" }), "Yes, I consent"),
       ssoState: "noscopes",
       onGetData
     }
-  )) : /* @__PURE__ */ React2.createElement(
-    Button,
+  )) : /* @__PURE__ */ React3.createElement(
+    Button2,
     {
       variant: "success",
       onClick: handleAgree,
       className: "me-1 text-white d-flex align-items-center"
     },
-    /* @__PURE__ */ React2.createElement("img", { src: yes_default, className: "me-2" }),
+    /* @__PURE__ */ React3.createElement("img", { src: yes_default, className: "me-1" }),
     "Yes, I consent"
-  ), /* @__PURE__ */ React2.createElement(
-    Button,
+  ), /* @__PURE__ */ React3.createElement(
+    Button2,
     {
-      variant: "secondary",
+      variant: "success-outline",
       onClick: handleNotAllow,
-      className: "text-white d-flex align-items-center"
+      className: "d-flex align-items-center"
     },
-    /* @__PURE__ */ React2.createElement("img", { src: no_default, className: "me-2" }),
+    /* @__PURE__ */ React3.createElement("img", { src: no_default, className: "me-1" }),
     "Reject Consent"
-  )) : loading === "connect" ? /* @__PURE__ */ React2.createElement(
-    Button,
-    {
-      variant: "success",
-      disabled: true,
-      className: "d-flex align-items-center text-white"
-    },
-    /* @__PURE__ */ React2.createElement(
-      "span",
-      {
-        className: "spinner-border spinner-border-sm me-1",
-        role: "status",
-        "aria-hidden": "true"
-      }
-    ),
-    "Please connect your Concordium wallet"
-  ) : loading === "sign" ? /* @__PURE__ */ React2.createElement(
-    Button,
-    {
-      variant: "success",
-      disabled: true,
-      className: "d-flex align-items-center text-white"
-    },
-    /* @__PURE__ */ React2.createElement(
-      "span",
-      {
-        className: "spinner-border spinner-border-sm me-1",
-        role: "status",
-        "aria-hidden": "true"
-      }
-    ),
-    "Please sign the message on your wallet twice and wait for it to be saved."
-  ) : /* @__PURE__ */ React2.createElement(
-    Button,
-    {
-      variant: "success",
-      disabled: true,
-      className: "d-flex align-items-center text-white"
-    },
-    /* @__PURE__ */ React2.createElement(
-      "span",
-      {
-        className: "spinner-border spinner-border-sm me-1",
-        role: "status",
-        "aria-hidden": "true"
-      }
-    ),
-    "Saving..."
-  )))) : /* @__PURE__ */ React2.createElement("div", { className: "p-4" }, /* @__PURE__ */ React2.createElement(
+  )) : /* @__PURE__ */ React3.createElement(React3.Fragment, null))))) : /* @__PURE__ */ React3.createElement("div", { className: "p-4" }, /* @__PURE__ */ React3.createElement(
     ContentLoader,
     {
       speed: 2,
@@ -8090,14 +8279,14 @@ var ConsentComponent = ({ endpoint }) => {
       backgroundColor: "#f3f3f3",
       foregroundColor: "#ecebeb"
     },
-    /* @__PURE__ */ React2.createElement("rect", { x: "0", y: "0", rx: "3", ry: "3", width: "67", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "76", y: "0", rx: "3", ry: "3", width: "140", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "127", y: "48", rx: "3", ry: "3", width: "53", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "187", y: "48", rx: "3", ry: "3", width: "72", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "18", y: "48", rx: "3", ry: "3", width: "100", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "0", y: "71", rx: "3", ry: "3", width: "37", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "18", y: "23", rx: "3", ry: "3", width: "140", height: "11" }),
-    /* @__PURE__ */ React2.createElement("rect", { x: "166", y: "23", rx: "3", ry: "3", width: "173", height: "11" })
+    /* @__PURE__ */ React3.createElement("rect", { x: "0", y: "0", rx: "3", ry: "3", width: "67", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "76", y: "0", rx: "3", ry: "3", width: "140", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "127", y: "48", rx: "3", ry: "3", width: "53", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "187", y: "48", rx: "3", ry: "3", width: "72", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "18", y: "48", rx: "3", ry: "3", width: "100", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "0", y: "71", rx: "3", ry: "3", width: "37", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "18", y: "23", rx: "3", ry: "3", width: "140", height: "11" }),
+    /* @__PURE__ */ React3.createElement("rect", { x: "166", y: "23", rx: "3", ry: "3", width: "173", height: "11" })
   )))))));
 };
 var Consent_default = ConsentComponent;