wallet-connect-button-vue 1.0.3 → 1.0.5

package/README.md

@@ -1,5 +1,56 @@
 # wallet-connect-button-vue
 
-A Vue component for wallet connection functionality.
+A Vue 3 component for NL Wallet integration.
+
+## Installation
+
+```bash
+npm install wallet-connect-button-vue
+```
+
+## Usage
+
+1. Import the component in your Vue app:
+
+```typescript
+import { WalletConnectButton } from 'wallet-connect-button-vue';
+```
+
+2. Use the component in your template:
+
+```vue
+<template>
+  <WalletConnectButton 
+    :client-id="'your-client-id'" 
+    :api-key="'your-api-key'"
+    :wallet-connect-host="'https://wallet-connect.eu'"
+    :label="'Connect Wallet'"
+    @success="onWalletSuccess" />
+</template>
+```
+
+3. Handle the success event in your component:
+
+```typescript
+<script setup>
+const onWalletSuccess = (attributes: any) => {
+  console.log('Wallet connected successfully:', attributes);
+}
+</script>
+```
+
+## API
+
+### Props
+
+- `clientId: string` - Required. Your client ID for wallet connection
+- `apiKey?: string` - Optional. API key for authentication
+- `walletConnectHost?: string` - Optional. Custom wallet connect host URL (defaults to https://wallet-connect.eu)
+- `label?: string` - Optional. Custom button text (defaults to 'Inloggen met NL Wallet')
+- `lang?: string` - Optional. Language setting for the wallet button (defaults to 'nl')
+
+### Events
+
+- `success` - Emitted when wallet connection succeeds
 
 For further explanation and documentation, visit: https://wallet-connect.eu

package/dist/index.esm.js

@@ -38,7 +38,7 @@ const _hoisted_2 = {
   class: "attributes"
 };
 const _hoisted_3 = { class: "verification-card" };
-const _hoisted_4 = ["text", "usecase", "start-url"];
+const _hoisted_4 = ["text", "usecase", "start-url", "lang"];
 
 
 const _sfc_main = {
@@ -48,7 +48,8 @@ const _sfc_main = {
   clientId: { type: String, required: true },
   onSuccess: { type: Function, required: true },
   apiKey: { type: String, required: false },
-  walletConnectHost: { type: String, required: false }
+  walletConnectHost: { type: String, required: false },
+  lang: { type: String, required: false, default: 'nl' }
 },
   setup(__props) {
 
@@ -62,7 +63,7 @@ const buttonRef = ref(null);
 const startUrl = computed(() => {
   const baseUrl = props.walletConnectHost || 'https://wallet-connect.eu';
   const returnUrl = typeof window !== 'undefined' ? window.location.href : '';
-  return `${baseUrl}/create-session?lang=en&return_url=${encodeURIComponent(returnUrl)}`;
+  return `${baseUrl}/api/create-session?lang=en&return_url=${encodeURIComponent(returnUrl)}`;
 });
 
 const handleSuccess = (e) => {
@@ -105,7 +106,7 @@ const fetchDisclosedAttributes = async () => {
 
   loading.value = true;
   const baseUrl = props.walletConnectHost || "https://wallet-connect.eu";
-  let url = baseUrl + `/disclosed-attributes?session_token=${session_token}&client_id=${props.clientId}`;
+  let url = baseUrl + `/api/disclosed-attributes?session_token=${session_token}&client_id=${props.clientId}`;
   if (nonce) url = `${url}&nonce=${nonce}`;
 
   const headers = props.apiKey ? { 'Authorization': `Bearer ${props.apiKey}` } : {};
@@ -160,7 +161,7 @@ return (_ctx, _cache) => {
           text: props.label,
           usecase: __props.clientId,
           "start-url": startUrl.value,
-          lang: "nl"
+          lang: props.lang
         }, null, 8 /* PROPS */, _hoisted_4))
 }
 }