wallet-connect-button-react 1.0.4 → 1.0.5

package/README.md

@@ -1,5 +1,50 @@
 # wallet-connect-button-react
 
-A React component for wallet connection functionality.
+A React component for NL Wallet integration.
+
+## Installation
+
+```bash
+npm install wallet-connect-button-react
+```
+
+## Usage
+
+1. Import the component in your React app:
+
+```typescript
+import { WalletConnectButton } from 'wallet-connect-button-react';
+```
+
+2. Use the component in your JSX:
+
+```jsx
+<WalletConnectButton 
+  clientId="your-client-id"
+  apiKey="your-api-key"
+  walletConnectHost="https://wallet-connect.eu"
+  onSuccess={(attributes) => console.log('Success:', attributes)}
+>
+  Connect Wallet
+</WalletConnectButton>
+```
+
+3. Handle the success callback in your component:
+
+```typescript
+const handleWalletSuccess = (attributes: any) => {
+  console.log('Wallet connected successfully:', attributes);
+};
+```
+
+## API
+
+### Props
+
+- `clientId: string` - Required. Your client ID for wallet connection
+- `onSuccess: (attributes: AttributeData | undefined) => void` - Required. Callback function called when wallet connection succeeds
+- `apiKey?: string` - Optional. API key for authentication
+- `walletConnectHost?: string` - Optional. Custom wallet connect host URL (defaults to https://wallet-connect.eu)
+- `children?: React.ReactNode` - Optional. Custom button content
 
 For further explanation and documentation, visit: https://wallet-connect.eu

package/dist/WalletConnectButton.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+interface AttributeData {
+    age_over_18?: boolean;
+    [key: string]: any;
+}
+export interface WalletConnectButtonProps {
+    children?: React.ReactNode;
+    clientId: string;
+    onSuccess: (attributes: AttributeData | undefined) => void;
+    apiKey?: string;
+    walletConnectHost?: string;
+    lang?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'nl-wallet-button': {
+                ref?: React.RefObject<HTMLElement>;
+                text?: React.ReactNode;
+                usecase?: string;
+                'start-url'?: string;
+                lang?: string;
+            };
+        }
+    }
+}
+declare function WalletConnectButton({ children, clientId, onSuccess, apiKey, walletConnectHost, lang }: WalletConnectButtonProps): import("react/jsx-runtime").JSX.Element;
+export default WalletConnectButton;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NLWalletButton } from './NLWalletButton';
-export { default } from './NLWalletButton';
-export type { NLWalletButtonProps } from './NLWalletButton';
+export { default as WalletConnectButton } from './WalletConnectButton';
+export { default } from './WalletConnectButton';
+export type { WalletConnectButtonProps } from './WalletConnectButton';

package/dist/index.esm.js

@@ -526,9 +526,9 @@ function useSearchParams() {
     return [searchParams, setSearchParams, removeSearchParam];
 }
 
-function NLWalletButton(_a) {
+function WalletConnectButton(_a) {
     var _this = this;
-    var children = _a.children, clientId = _a.clientId, onSuccess = _a.onSuccess, apiKey = _a.apiKey, walletConnectHost = _a.walletConnectHost;
+    var children = _a.children, clientId = _a.clientId, onSuccess = _a.onSuccess, apiKey = _a.apiKey, walletConnectHost = _a.walletConnectHost, lang = _a.lang;
     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];
@@ -592,29 +592,10 @@ function NLWalletButton(_a) {
         if (!session_token)
             return;
         setLoading(true);
-        var baseUrl = walletConnectHost || "https://wallet-connect.eu";
-        var url = baseUrl + "/disclosed-attributes?session_token=".concat(session_token, "&client_id=").concat(clientId);
+        var baseUrl = apiKey ? (walletConnectHost || "https://wallet-connect.eu") : "";
+        var url = baseUrl + "/api/disclosed-attributes?session_token=".concat(session_token, "&client_id=").concat(clientId);
         if (nonce)
             url = "".concat(url, "&nonce=").concat(nonce);
-        // Example response structure
-        // {
-        //   "attributes": {
-        //     "urn:eudi:pid:nl:1": {
-        //       "attributes": {
-        //         "urn:eudi:pid:nl:1": {
-        //           "age_over_18": true
-        //         }
-        //       },
-        //       "issuerUri": "https://cert.issuer.example.com/",
-        //       "ca": "ca.issuer.example.com",
-        //       "validityInfo": {
-        //         "signed": "2025-07-22T12:08:12Z",
-        //         "validFrom": "2025-07-22T00:00:00Z",
-        //         "validUntil": "2026-07-22T00:00:00Z"
-        //       }
-        //     }
-        //   }
-        // }
         var headers = apiKey ? { 'Authorization': "Bearer ".concat(apiKey) } : {};
         axios
             .get(url, { headers: headers })
@@ -639,7 +620,7 @@ function NLWalletButton(_a) {
     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 (jsxRuntimeExports.jsx("nl-wallet-button", { ref: buttonRef, text: children, usecase: clientId, "start-url": "".concat(walletConnectHost || "https://wallet-connect.eu", "/create-session?lang=en&return_url=").concat(encodeURIComponent(window.location.href)), lang: "nl" }));
+    return (jsxRuntimeExports.jsx("nl-wallet-button", { ref: buttonRef, text: children, usecase: clientId, "start-url": "".concat(walletConnectHost || "https://wallet-connect.eu", "/api/create-session?lang=en&return_url=").concat(encodeURIComponent(window.location.href)), lang: lang || "nl" }));
 }
 
 var nlWalletWeb$1 = {};
@@ -7718,5 +7699,5 @@ var nlWalletWeb = /*#__PURE__*/_mergeNamespaces({
     default: nlWalletWeb$1
 }, [nlWalletWeb$1]);
 
-export { NLWalletButton, NLWalletButton as default };
+export { WalletConnectButton, WalletConnectButton as default };
 //# sourceMappingURL=index.esm.js.map