wallet-connect-button-react 1.1.6 → 1.1.8

package/dist/WalletConnectButton.d.ts

@@ -8,7 +8,8 @@ export interface WalletConnectButtonProps {
     clientId: string;
     onSuccess: (attributes: AttributeData | undefined) => void;
     apiKey?: string;
-    walletConnectHost?: string;
+    useLocalWcServer?: boolean;
+    business?: boolean;
     lang?: string;
     helpBaseUrl?: string;
     issuance?: boolean;
@@ -25,9 +26,10 @@ declare global {
                 'same-device-ul'?: string;
                 'cross-device-ul'?: string;
                 'help-base-url'?: string;
+                onClick?: (event: Event) => void;
             };
         }
     }
 }
-declare function WalletConnectButton({ label, clientId, onSuccess, apiKey, walletConnectHost, lang, helpBaseUrl, issuance }: WalletConnectButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function WalletConnectButton({ label, clientId, onSuccess, apiKey, useLocalWcServer, business, lang, helpBaseUrl, issuance }: WalletConnectButtonProps): import("react/jsx-runtime").JSX.Element;
 export default WalletConnectButton;

package/dist/index.esm.js

@@ -106,21 +106,41 @@ 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 getDefaultHost(useLocalWcServer, business, issuance) {
+    // If useLocalWcServer is set, use local server
+    if (useLocalWcServer) {
+        if (business) {
+            return issuance ? 'http://localhost:4007' : 'http://bw.localhost:3021';
+        }
+        return issuance ? 'http://localhost:3007' : 'http://localhost:3021';
+    }
+    // Otherwise use remote servers
+    if (business) {
+        return issuance ? 'https://bw.issuance.wallet-connect.eu' : 'https://bw.wallet-connect.eu';
+    }
+    return issuance ? 'https://issuance.wallet-connect.eu' : 'https://wallet-connect.eu';
+}
+function constructURI(clientId, session_type, walletConnectHost, business) {
+    var request_uri = "".concat(walletConnectHost, "/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);
+    var deepLinkScheme = business
+        ? 'businesswalletdebuginteraction://wallet.kvk.rijksoverheid.nl'
+        : 'walletdebuginteraction://wallet.edi.rijksoverheid.nl';
+    return "".concat(deepLinkScheme, "/disclosure_based_issuance?request_uri=").concat(encodeURIComponent(request_uri), "&request_uri_method=").concat(request_uri_method, "&client_id=").concat(client_id_uri);
 }
 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 = useState(false), loading = _c[0], setLoading = _c[1];
-    var _d = useState(null), error = _d[0], setError = _d[1];
+    var label = _a.label, clientId = _a.clientId, onSuccess = _a.onSuccess, apiKey = _a.apiKey, _b = _a.useLocalWcServer, useLocalWcServer = _b === void 0 ? false : _b, _c = _a.business, business = _c === void 0 ? false : _c, lang = _a.lang, helpBaseUrl = _a.helpBaseUrl, _d = _a.issuance, issuance = _d === void 0 ? false : _d;
+    var _e = useSearchParams(), searchParams = _e[0], setSearchParams = _e[1], removeSearchParam = _e[2];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(null), error = _g[0], setError = _g[1];
     var buttonRef = useRef(null);
-    var sameDeviceUl = constructURI(clientId, "same_device");
-    var crossDeviceUl = constructURI(clientId, "cross_device");
+    var walletConnectHost = getDefaultHost(useLocalWcServer, business, issuance);
+    var sameDeviceUl = constructURI(clientId, "same_device", walletConnectHost, business);
+    var crossDeviceUl = constructURI(clientId, "cross_device", walletConnectHost, business);
     useEffect(function () {
         // Dynamically import the web component
         var loadWebComponent = function () { return __awaiter(_this, void 0, void 0, function () {
@@ -137,6 +157,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 +176,130 @@ 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);
+                    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 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]);
+                                    url = "".concat(walletConnectHost, "/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;
@@ -180,7 +323,7 @@ function WalletConnectButton(_a) {
         if (!session_token)
             return;
         setLoading(true);
-        var baseUrl = apiKey ? (walletConnectHost || "https://wallet-connect.eu") : "";
+        var baseUrl = apiKey ? walletConnectHost : "";
         var url = baseUrl + "/api/disclosed-attributes?session_token=".concat(session_token, "&client_id=").concat(clientId);
         if (nonce)
             url = "".concat(url, "&nonce=").concat(nonce);
@@ -214,7 +357,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, "/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 : {};