Merge 52443fd into b828dea

src/components.d.ts

@@ -70,6 +70,7 @@ declare global {
     interface LiskButtonSign {
       'buttonTitle': string;
       'message': string;
+      'sourceId': string;
       'type': string;
     }
   }
@@ -95,6 +96,7 @@ declare global {
     export interface LiskButtonSignAttributes extends HTMLAttributes {
       'buttonTitle'?: string;
       'message'?: string;
+      'sourceId'?: string;
       'type'?: string;
     }
   }

src/components/lisk-button-sign/lisk-button-sign.spec.tsx

@@ -61,6 +61,24 @@ describe('LiskButtonSign', () => {
         .toHaveBeenCalledWith({ message: element.message, kind: 'sign-nano' })
     });
 
+    it('should call getUrl method with input value if `sourceId` attribute provided', async () => {
+      getURL = jest.fn();
+      element.sourceId = 'test-input'
+      const message = 'Message from input';
+
+      await window.flush();
+      const btn = element.querySelector('button');
+      // Can't test with real value from input element.
+      // Add input to the jsdom were ununsuccessful, value everytime `undefined`
+      // Solution is to mock querySelector that is triggered in the LiskButtonSign.getValue()
+      document.querySelector = jest.fn().mockReturnValue({
+        value: message
+      });
+      btn.click();
+      expect(getURL)
+        .toHaveBeenCalledWith({ message, kind: 'sign-hub' })
+    });
+
     it('should call openURL method on click event', async () => {
       const el = new LiskButtonSign();
       el.openUrl = jest.fn();

src/components/lisk-button-sign/lisk-button-sign.tsx

@@ -15,12 +15,21 @@ export class LiskButtonSign extends LiskButton {
 
   @Prop() type: string;
   @Prop() message: string;
-  @Prop() buttonTitle: string
+  @Prop() buttonTitle: string;
+  @Prop() sourceId: string = "";
 
-  open() {
-    const { type, message } = this;
+  getValue(): string {
+    const input: HTMLInputElement = document.querySelector(`#${this.sourceId}`);
+    return input.value;
+  }
 
-    const url = getURL({ message, kind: (type === 'nano' ? 'sign-nano' : 'sign-hub') });
+  open(): void {
+    const { type, message } = this;
+    const data = !!this.sourceId ? this.getValue() : message;
+    const url = getURL({
+      message: data,
+      kind: (type === 'nano' ? 'sign-nano' : 'sign-hub')
+    });
     this.openUrl(url);
   }
 

src/index.html

@@ -28,6 +28,10 @@
         <lisk-button-sign type="hub" message="sign with hub" button-title="Sign by using Lisk Hub!"></lisk-button-sign>
         <lisk-button-sign message="sign with hub 2"></lisk-button-sign>
         <lisk-button-sign type="nano" message="sign with nano"></lisk-button-sign>
+        <p>
+          <input type="text" id="message-input" placeholder="Message...">
+          <lisk-button-sign source-id="message-input" button-title="Sign Message"></lisk-button-sign>
+        </p>
       </div>
     </div>
   </div>