wallet-connect-button-react 1.1.6 → 1.1.7

package/dist/WalletConnectButton.d.ts

@@ -25,6 +25,7 @@ declare global {
                 'same-device-ul'?: string;
                 'cross-device-ul'?: string;
                 'help-base-url'?: string;
+                onClick?: (event: Event) => void;
             };
         }
     }

package/dist/index.esm.js

@@ -106,8 +106,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);
@@ -119,8 +122,8 @@ function WalletConnectButton(_a) {
     var _c = useState(false), loading = _c[0], setLoading = _c[1];
     var _d = useState(null), error = _d[0], setError = _d[1];
     var buttonRef = useRef(null);
-    var sameDeviceUl = constructURI(clientId, "same_device");
-    var crossDeviceUl = constructURI(clientId, "cross_device");
+    var sameDeviceUl = constructURI(clientId, "same_device", walletConnectHost);
+    var crossDeviceUl = constructURI(clientId, "cross_device", walletConnectHost);
     useEffect(function () {
         // Dynamically import the web component
         var loadWebComponent = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -137,6 +140,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:
@@ -154,9 +159,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;
@@ -214,7 +341,7 @@ function WalletConnectButton(_a) {
     if (error) {
         return (jsx("div", { className: "attributes", children: jsxs("div", { className: "verification-card", children: [jsx("h2", { children: "Error" }), jsxs("p", { children: ["An error occurred while verifying your attributes: ", error] })] }) }));
     }
-    return (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 (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 : {};