wallet-connect-button-react 1.1.5 → 1.1.7

package/dist/index.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var require$$0 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var axios = require('axios');
 
 function _mergeNamespaces(n, m) {
@@ -80,432 +81,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var jsxRuntime = {exports: {}};
-
-var reactJsxRuntime_production = {};
-
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_production;
-
-function requireReactJsxRuntime_production () {
-	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-	hasRequiredReactJsxRuntime_production = 1;
-	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-	function jsxProd(type, config, maybeKey) {
-	  var key = null;
-	  void 0 !== maybeKey && (key = "" + maybeKey);
-	  void 0 !== config.key && (key = "" + config.key);
-	  if ("key" in config) {
-	    maybeKey = {};
-	    for (var propName in config)
-	      "key" !== propName && (maybeKey[propName] = config[propName]);
-	  } else maybeKey = config;
-	  config = maybeKey.ref;
-	  return {
-	    $$typeof: REACT_ELEMENT_TYPE,
-	    type: type,
-	    key: key,
-	    ref: void 0 !== config ? config : null,
-	    props: maybeKey
-	  };
-	}
-	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-	reactJsxRuntime_production.jsx = jsxProd;
-	reactJsxRuntime_production.jsxs = jsxProd;
-	return reactJsxRuntime_production;
-}
-
-var reactJsxRuntime_development = {};
-
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactJsxRuntime_development;
-
-function requireReactJsxRuntime_development () {
-	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-	hasRequiredReactJsxRuntime_development = 1;
-	"production" !== process.env.NODE_ENV &&
-	  (function () {
-	    function getComponentNameFromType(type) {
-	      if (null == type) return null;
-	      if ("function" === typeof type)
-	        return type.$$typeof === REACT_CLIENT_REFERENCE
-	          ? null
-	          : type.displayName || type.name || null;
-	      if ("string" === typeof type) return type;
-	      switch (type) {
-	        case REACT_FRAGMENT_TYPE:
-	          return "Fragment";
-	        case REACT_PROFILER_TYPE:
-	          return "Profiler";
-	        case REACT_STRICT_MODE_TYPE:
-	          return "StrictMode";
-	        case REACT_SUSPENSE_TYPE:
-	          return "Suspense";
-	        case REACT_SUSPENSE_LIST_TYPE:
-	          return "SuspenseList";
-	        case REACT_ACTIVITY_TYPE:
-	          return "Activity";
-	      }
-	      if ("object" === typeof type)
-	        switch (
-	          ("number" === typeof type.tag &&
-	            console.error(
-	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-	            ),
-	          type.$$typeof)
-	        ) {
-	          case REACT_PORTAL_TYPE:
-	            return "Portal";
-	          case REACT_CONTEXT_TYPE:
-	            return (type.displayName || "Context") + ".Provider";
-	          case REACT_CONSUMER_TYPE:
-	            return (type._context.displayName || "Context") + ".Consumer";
-	          case REACT_FORWARD_REF_TYPE:
-	            var innerType = type.render;
-	            type = type.displayName;
-	            type ||
-	              ((type = innerType.displayName || innerType.name || ""),
-	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
-	            return type;
-	          case REACT_MEMO_TYPE:
-	            return (
-	              (innerType = type.displayName || null),
-	              null !== innerType
-	                ? innerType
-	                : getComponentNameFromType(type.type) || "Memo"
-	            );
-	          case REACT_LAZY_TYPE:
-	            innerType = type._payload;
-	            type = type._init;
-	            try {
-	              return getComponentNameFromType(type(innerType));
-	            } catch (x) {}
-	        }
-	      return null;
-	    }
-	    function testStringCoercion(value) {
-	      return "" + value;
-	    }
-	    function checkKeyStringCoercion(value) {
-	      try {
-	        testStringCoercion(value);
-	        var JSCompiler_inline_result = !1;
-	      } catch (e) {
-	        JSCompiler_inline_result = true;
-	      }
-	      if (JSCompiler_inline_result) {
-	        JSCompiler_inline_result = console;
-	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-	        var JSCompiler_inline_result$jscomp$0 =
-	          ("function" === typeof Symbol &&
-	            Symbol.toStringTag &&
-	            value[Symbol.toStringTag]) ||
-	          value.constructor.name ||
-	          "Object";
-	        JSCompiler_temp_const.call(
-	          JSCompiler_inline_result,
-	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-	          JSCompiler_inline_result$jscomp$0
-	        );
-	        return testStringCoercion(value);
-	      }
-	    }
-	    function getTaskName(type) {
-	      if (type === REACT_FRAGMENT_TYPE) return "<>";
-	      if (
-	        "object" === typeof type &&
-	        null !== type &&
-	        type.$$typeof === REACT_LAZY_TYPE
-	      )
-	        return "<...>";
-	      try {
-	        var name = getComponentNameFromType(type);
-	        return name ? "<" + name + ">" : "<...>";
-	      } catch (x) {
-	        return "<...>";
-	      }
-	    }
-	    function getOwner() {
-	      var dispatcher = ReactSharedInternals.A;
-	      return null === dispatcher ? null : dispatcher.getOwner();
-	    }
-	    function UnknownOwner() {
-	      return Error("react-stack-top-frame");
-	    }
-	    function hasValidKey(config) {
-	      if (hasOwnProperty.call(config, "key")) {
-	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-	        if (getter && getter.isReactWarning) return false;
-	      }
-	      return void 0 !== config.key;
-	    }
-	    function defineKeyPropWarningGetter(props, displayName) {
-	      function warnAboutAccessingKey() {
-	        specialPropKeyWarningShown ||
-	          ((specialPropKeyWarningShown = true),
-	          console.error(
-	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-	            displayName
-	          ));
-	      }
-	      warnAboutAccessingKey.isReactWarning = true;
-	      Object.defineProperty(props, "key", {
-	        get: warnAboutAccessingKey,
-	        configurable: true
-	      });
-	    }
-	    function elementRefGetterWithDeprecationWarning() {
-	      var componentName = getComponentNameFromType(this.type);
-	      didWarnAboutElementRef[componentName] ||
-	        ((didWarnAboutElementRef[componentName] = true),
-	        console.error(
-	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-	        ));
-	      componentName = this.props.ref;
-	      return void 0 !== componentName ? componentName : null;
-	    }
-	    function ReactElement(
-	      type,
-	      key,
-	      self,
-	      source,
-	      owner,
-	      props,
-	      debugStack,
-	      debugTask
-	    ) {
-	      self = props.ref;
-	      type = {
-	        $$typeof: REACT_ELEMENT_TYPE,
-	        type: type,
-	        key: key,
-	        props: props,
-	        _owner: owner
-	      };
-	      null !== (void 0 !== self ? self : null)
-	        ? Object.defineProperty(type, "ref", {
-	            enumerable: false,
-	            get: elementRefGetterWithDeprecationWarning
-	          })
-	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-	      type._store = {};
-	      Object.defineProperty(type._store, "validated", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: 0
-	      });
-	      Object.defineProperty(type, "_debugInfo", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: null
-	      });
-	      Object.defineProperty(type, "_debugStack", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugStack
-	      });
-	      Object.defineProperty(type, "_debugTask", {
-	        configurable: false,
-	        enumerable: false,
-	        writable: true,
-	        value: debugTask
-	      });
-	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-	      return type;
-	    }
-	    function jsxDEVImpl(
-	      type,
-	      config,
-	      maybeKey,
-	      isStaticChildren,
-	      source,
-	      self,
-	      debugStack,
-	      debugTask
-	    ) {
-	      var children = config.children;
-	      if (void 0 !== children)
-	        if (isStaticChildren)
-	          if (isArrayImpl(children)) {
-	            for (
-	              isStaticChildren = 0;
-	              isStaticChildren < children.length;
-	              isStaticChildren++
-	            )
-	              validateChildKeys(children[isStaticChildren]);
-	            Object.freeze && Object.freeze(children);
-	          } else
-	            console.error(
-	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-	            );
-	        else validateChildKeys(children);
-	      if (hasOwnProperty.call(config, "key")) {
-	        children = getComponentNameFromType(type);
-	        var keys = Object.keys(config).filter(function (k) {
-	          return "key" !== k;
-	        });
-	        isStaticChildren =
-	          0 < keys.length
-	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
-	            : "{key: someKey}";
-	        didWarnAboutKeySpread[children + isStaticChildren] ||
-	          ((keys =
-	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
-	          console.error(
-	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-	            isStaticChildren,
-	            children,
-	            keys,
-	            children
-	          ),
-	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
-	      }
-	      children = null;
-	      void 0 !== maybeKey &&
-	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
-	      hasValidKey(config) &&
-	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
-	      if ("key" in config) {
-	        maybeKey = {};
-	        for (var propName in config)
-	          "key" !== propName && (maybeKey[propName] = config[propName]);
-	      } else maybeKey = config;
-	      children &&
-	        defineKeyPropWarningGetter(
-	          maybeKey,
-	          "function" === typeof type
-	            ? type.displayName || type.name || "Unknown"
-	            : type
-	        );
-	      return ReactElement(
-	        type,
-	        children,
-	        self,
-	        source,
-	        getOwner(),
-	        maybeKey,
-	        debugStack,
-	        debugTask
-	      );
-	    }
-	    function validateChildKeys(node) {
-	      "object" === typeof node &&
-	        null !== node &&
-	        node.$$typeof === REACT_ELEMENT_TYPE &&
-	        node._store &&
-	        (node._store.validated = 1);
-	    }
-	    var React = require$$0,
-	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
-	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
-	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
-	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
-	      REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-	    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
-	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
-	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
-	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
-	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
-	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
-	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
-	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
-	      hasOwnProperty = Object.prototype.hasOwnProperty,
-	      isArrayImpl = Array.isArray,
-	      createTask = console.createTask
-	        ? console.createTask
-	        : function () {
-	            return null;
-	          };
-	    React = {
-	      "react-stack-bottom-frame": function (callStackForError) {
-	        return callStackForError();
-	      }
-	    };
-	    var specialPropKeyWarningShown;
-	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React["react-stack-bottom-frame"].bind(
-	      React,
-	      UnknownOwner
-	    )();
-	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-	    var didWarnAboutKeySpread = {};
-	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-	    reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        false,
-	        source,
-	        self,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
-	      var trackActualOwner =
-	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-	      return jsxDEVImpl(
-	        type,
-	        config,
-	        maybeKey,
-	        true,
-	        source,
-	        self,
-	        trackActualOwner
-	          ? Error("react-stack-top-frame")
-	          : unknownOwnerDebugStack,
-	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-	      );
-	    };
-	  })();
-	return reactJsxRuntime_development;
-}
-
-if (process.env.NODE_ENV === 'production') {
-  jsxRuntime.exports = requireReactJsxRuntime_production();
-} else {
-  jsxRuntime.exports = requireReactJsxRuntime_development();
-}
-
-var jsxRuntimeExports = jsxRuntime.exports;
-
 function useSearchParams() {
-    var _a = require$$0.useState(function () {
+    var _a = react.useState(function () {
         return new URLSearchParams(window.location.search);
     }), searchParams = _a[0], setSearchParamsState = _a[1];
-    var setSearchParams = require$$0.useCallback(function (params) {
+    var setSearchParams = react.useCallback(function (params) {
         var url = new URL(window.location.href);
         Object.entries(params).forEach(function (_a) {
             var key = _a[0], value = _a[1];
@@ -514,13 +94,13 @@ function useSearchParams() {
         window.history.replaceState({}, '', url.toString());
         setSearchParamsState(new URLSearchParams(url.search));
     }, []);
-    var removeSearchParam = require$$0.useCallback(function (paramName) {
+    var removeSearchParam = react.useCallback(function (paramName) {
         var url = new URL(window.location.href);
         url.searchParams.delete(paramName);
         window.history.replaceState({}, '', url.toString());
         setSearchParamsState(new URLSearchParams(url.search));
     }, []);
-    require$$0.useEffect(function () {
+    react.useEffect(function () {
         var handlePopState = function () {
             setSearchParamsState(new URLSearchParams(window.location.search));
         };
@@ -530,8 +110,11 @@ function useSearchParams() {
     return [searchParams, setSearchParams, removeSearchParam];
 }
 
-function constructURI(clientId, session_type) {
-    var request_uri = "https://issuance.wallet-connect.eu/disclosure/".concat(clientId, "/request_uri?session_type=").concat(session_type);
+// Global cache to prevent duplicate requests
+var credentialsCache = new Map();
+function constructURI(clientId, session_type, walletConnectHost) {
+    var baseHost = walletConnectHost || "https://issuance.wallet-connect.eu";
+    var request_uri = "".concat(baseHost, "/disclosure/").concat(clientId, "/request_uri?session_type=").concat(session_type);
     var request_uri_method = "post";
     var client_id_uri = "".concat(clientId, ".example.com");
     return "walletdebuginteraction://wallet.edi.rijksoverheid.nl/disclosure_based_issuance?request_uri=".concat(encodeURIComponent(request_uri), "&request_uri_method=").concat(request_uri_method, "&client_id=").concat(client_id_uri);
@@ -540,12 +123,12 @@ function WalletConnectButton(_a) {
     var _this = this;
     var label = _a.label, clientId = _a.clientId, onSuccess = _a.onSuccess, apiKey = _a.apiKey, walletConnectHost = _a.walletConnectHost, lang = _a.lang, helpBaseUrl = _a.helpBaseUrl, issuance = _a.issuance;
     var _b = useSearchParams(), searchParams = _b[0], setSearchParams = _b[1], removeSearchParam = _b[2];
-    var _c = require$$0.useState(false), loading = _c[0], setLoading = _c[1];
-    var _d = require$$0.useState(null), error = _d[0], setError = _d[1];
-    var buttonRef = require$$0.useRef(null);
-    var sameDeviceUl = constructURI(clientId, "same_device");
-    var crossDeviceUl = constructURI(clientId, "cross_device");
-    require$$0.useEffect(function () {
+    var _c = react.useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = react.useState(null), error = _d[0], setError = _d[1];
+    var buttonRef = react.useRef(null);
+    var sameDeviceUl = constructURI(clientId, "same_device", walletConnectHost);
+    var crossDeviceUl = constructURI(clientId, "cross_device", walletConnectHost);
+    react.useEffect(function () {
         // Dynamically import the web component
         var loadWebComponent = function () { return __awaiter(_this, void 0, void 0, function () {
             var button, error_1;
@@ -561,6 +144,8 @@ function WalletConnectButton(_a) {
                         if (button) {
                             button.addEventListener("success", handleSuccess);
                             button.addEventListener("failed", handleFailed);
+                            // Add click listener directly to the element
+                            button.addEventListener("click", handleButtonClick);
                         }
                         return [3 /*break*/, 3];
                     case 2:
@@ -578,9 +163,131 @@ function WalletConnectButton(_a) {
             if (button) {
                 button.removeEventListener("success", handleSuccess);
                 button.removeEventListener("failed", handleFailed);
+                button.removeEventListener("click", handleButtonClick);
             }
         };
     }, []);
+    var fetchRequestedCredentials = function () { return __awaiter(_this, void 0, void 0, function () {
+        var cacheKey, cached, fetchPromise;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!apiKey || !clientId)
+                        return [2 /*return*/, []];
+                    cacheKey = "".concat(clientId, "-").concat(walletConnectHost || "default");
+                    cached = credentialsCache.get(cacheKey);
+                    if (cached === null || cached === void 0 ? void 0 : cached.data) {
+                        return [2 /*return*/, cached.data];
+                    }
+                    if (!(cached === null || cached === void 0 ? void 0 : cached.promise)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, cached.promise];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2:
+                    fetchPromise = (function () { return __awaiter(_this, void 0, void 0, function () {
+                        var baseUrl, url, headers, response, credentials, error_2;
+                        var _a, _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    _c.trys.push([0, 2, , 3]);
+                                    baseUrl = walletConnectHost || "https://wallet-connect.eu";
+                                    url = "".concat(baseUrl, "/api/client/").concat(clientId, "/requested-credentials");
+                                    headers = { 'Authorization': "Bearer ".concat(apiKey) };
+                                    return [4 /*yield*/, axios.get(url, { headers: headers })];
+                                case 1:
+                                    response = _c.sent();
+                                    credentials = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.requestedCredentials) || [];
+                                    // Cache the result
+                                    credentialsCache.set(cacheKey, { data: credentials });
+                                    return [2 /*return*/, credentials];
+                                case 2:
+                                    error_2 = _c.sent();
+                                    // Remove failed request from cache
+                                    credentialsCache.delete(cacheKey);
+                                    throw error_2;
+                                case 3: return [2 /*return*/];
+                            }
+                        });
+                    }); })();
+                    // Cache the promise to prevent duplicate requests
+                    credentialsCache.set(cacheKey, { promise: fetchPromise });
+                    return [4 /*yield*/, fetchPromise];
+                case 3: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); };
+    var injectCredentialsIntoShadowDOM = function (credentials, retryCount) {
+        if (retryCount === void 0) { retryCount = 0; }
+        var maxRetries = 10;
+        var walletButton = buttonRef.current;
+        if (!walletButton || !walletButton.shadowRoot) {
+            return;
+        }
+        // Remove any existing credential info
+        var existingCredentials = walletButton.shadowRoot.querySelector('.required-credentials');
+        if (existingCredentials) {
+            existingCredentials.remove();
+        }
+        if (credentials.length === 0)
+            return;
+        // Look for the modal and website section
+        var modal = walletButton.shadowRoot.querySelector('.modal');
+        if (!modal) {
+            // Retry if modal not found yet
+            if (retryCount < maxRetries) {
+                setTimeout(function () {
+                    injectCredentialsIntoShadowDOM(credentials, retryCount + 1);
+                }, 200);
+                return;
+            }
+            return;
+        }
+        var websiteSection = modal.querySelector('.website');
+        // Determine language and translations
+        var isNL = lang === 'nl';
+        var headerText = isNL ? 'Benodigde Attestaties:' : 'Required Credentials:';
+        var getLinkText = isNL ? '→ Verkrijg attestatie' : '→ Get credential';
+        // Create credential info element
+        var credentialsDiv = document.createElement('div');
+        credentialsDiv.className = 'required-credentials';
+        credentialsDiv.innerHTML = "\n      <div style=\"\n        background: #f8f9fa;\n        border: 1px solid #e9ecef;\n        border-radius: 6px;\n        padding: 12px;\n        font-family: inherit;\n        font-size: 13px;\n        line-height: 1.4;\n      \">\n        <div style=\"margin: 0 0 8px 0; color: #212529; font-size: 14px; font-weight: 600;\">".concat(headerText, "</div>\n        ").concat(credentials.map(function (credential) {
+            var credentialName = isNL ? credential.credentialName.nl : credential.credentialName.en;
+            return "\n            <div style=\"margin-bottom: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;\">\n              <span style=\"color: #495057; font-weight: 500;\">".concat(credentialName, "</span>\n              ").concat(credential.websiteUrl ? "\n                <a href=\"".concat(credential.websiteUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"\n                  color: #0066cc;\n                  text-decoration: none;\n                  font-size: 12px;\n                  white-space: nowrap;\n                \">").concat(getLinkText, "</a>\n              ") : '', "\n            </div>\n          ");
+        }).join(''), "\n      </div>\n    ");
+        // Insert the credentials div after the website section
+        if (websiteSection) {
+            websiteSection.insertAdjacentElement('afterend', credentialsDiv);
+        }
+        else {
+            // Fallback: insert at the beginning of modal
+            modal.insertBefore(credentialsDiv, modal.firstChild);
+        }
+    };
+    var handleButtonClick = function (_event) { return __awaiter(_this, void 0, void 0, function () {
+        var credentials_1, error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, fetchRequestedCredentials()];
+                case 1:
+                    credentials_1 = _a.sent();
+                    if (credentials_1 && credentials_1.length > 0) {
+                        // Inject credentials into the shadow DOM with multiple attempts
+                        setTimeout(function () {
+                            injectCredentialsIntoShadowDOM(credentials_1);
+                        }, 100);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_3 = _a.sent();
+                    console.error('Failed to fetch credentials:', error_3);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
     // Function to handle the 'success' event
     var handleSuccess = function (e) {
         var customEvent = e;
@@ -598,7 +305,7 @@ function WalletConnectButton(_a) {
         var customEvent = e;
         console.log("Failed event received:", customEvent.detail);
     };
-    require$$0.useEffect(function () {
+    react.useEffect(function () {
         var session_token = searchParams.get("session_token");
         var nonce = searchParams.get("nonce");
         if (!session_token)
@@ -633,14 +340,16 @@ function WalletConnectButton(_a) {
         });
     }, [searchParams, onSuccess]);
     if (loading) {
-        return (jsxRuntimeExports.jsx("div", { className: "attributes", children: jsxRuntimeExports.jsxs("div", { className: "verification-card", children: [jsxRuntimeExports.jsx("h2", { children: "Checking attributes..." }), jsxRuntimeExports.jsx("p", { children: "Please wait while we verify your attributes." })] }) }));
+        return (jsxRuntime.jsx("div", { className: "attributes", children: jsxRuntime.jsxs("div", { className: "verification-card", children: [jsxRuntime.jsx("h2", { children: "Checking attributes..." }), jsxRuntime.jsx("p", { children: "Please wait while we verify your attributes." })] }) }));
     }
     if (error) {
-        return (jsxRuntimeExports.jsx("div", { className: "attributes", children: jsxRuntimeExports.jsxs("div", { className: "verification-card", children: [jsxRuntimeExports.jsx("h2", { children: "Error" }), jsxRuntimeExports.jsxs("p", { children: ["An error occurred while verifying your attributes: ", error] })] }) }));
+        return (jsxRuntime.jsx("div", { className: "attributes", children: jsxRuntime.jsxs("div", { className: "verification-card", children: [jsxRuntime.jsx("h2", { children: "Error" }), jsxRuntime.jsxs("p", { children: ["An error occurred while verifying your attributes: ", error] })] }) }));
     }
-    return (jsxRuntimeExports.jsx("nl-wallet-button", { ref: buttonRef, text: label, usecase: issuance ? "" : clientId, "start-url": "".concat(walletConnectHost || "https://wallet-connect.eu", "/api/create-session?lang=en&return_url=").concat(encodeURIComponent(window.location.href)), lang: lang || "nl", "same-device-ul": sameDeviceUl, "cross-device-ul": crossDeviceUl, "help-base-url": helpBaseUrl }));
+    return (jsxRuntime.jsx("nl-wallet-button", { ref: buttonRef, text: label, usecase: issuance ? "" : clientId, "start-url": "".concat(walletConnectHost || "https://wallet-connect.eu", "/api/create-session?lang=en&return_url=").concat(encodeURIComponent(window.location.href)), lang: lang || "nl", "same-device-ul": sameDeviceUl, "cross-device-ul": crossDeviceUl, "help-base-url": helpBaseUrl, onClick: handleButtonClick }));
 }
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
 var nlWalletWeb$1 = {};
 
 var di = Object.defineProperty;