Merge pull request #781 from SonicWizard/ionic

Headers and placeholders

app/e2e/broadcastTxPage.e2e-spec.ts

@@ -1,20 +1,20 @@
 import { browser, element, by, ElementFinder } from 'protractor';
 
-let heading: ElementFinder = element(by.css('h1'));
-
 describe('BroadcastTxPage', () => {
 
   beforeEach(() => {
     browser.get('');
   });
 
-  it('should have the temporary heading', () => {
+  it('should have an input field', () => {
     element(by.css('.bar-button-menutoggle')).click().then(() => {
       browser.driver.sleep(2000); // wait for the animation
       element.all(by.className('input-wrapper')).then((items) => {
         items[1].click();
         browser.driver.sleep(2000); // wait for the animation
-        expect(heading.getText()).toEqual('Broadcast Transaction');
+        let theElem = element.all(by.css('ion-label')).first;
+        console.log(theElem);
+        expect(element.all(by.css('ion-input')).first().isPresent()).toEqual(true);
         return items[1];
       });
     });

app/src/app/app.component.ts

@@ -38,7 +38,7 @@ export class InsightApp {
     this.pages = [
       { title: 'Blocks', component: BlocksPage },
       { title: 'Broadcast Transaction', component: BroadcastTxPage },
-      { title: 'Verify Message', component: VerifyMessagePage },
+      { title: 'Verify Signed Message', component: VerifyMessagePage },
       { title: 'Node Status', component: NodeStatusPage }
     ];
   }

app/src/pages/blocksPage/blocksPage.html

@@ -14,6 +14,13 @@
 
 <ion-content padding>
   <ion-list>
+    <ion-item>
+      <ion-row>
+        <ion-col>Height</ion-col>
+        <ion-col>Transactions</ion-col>
+        <ion-col>Mined By</ion-col>
+      </ion-row>
+    </ion-item>
     <ion-item *ngFor="let block of blocks | async">
       <ion-row>
         <ion-col>

app/src/pages/broadcastTxPage/broadcastTxPage.html

@@ -8,5 +8,18 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Broadcast Transaction</h1>
+  <ion-list>
+    <ion-item>
+      <p>This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-label floating>Raw transaction data</ion-label>
+      <ion-input type="text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <button ion-button outline>Send transaction</button>
+    </ion-item>
+  </ion-list>
 </ion-content>

app/src/pages/verifyMessagePage/verifyMessagePage.html

@@ -8,5 +8,31 @@
 </ion-header>
 
 <ion-content padding>
-  <h1>Verify Signed Message</h1>
+  <ion-list>
+    <ion-item>
+      <p>Bitcoin comes with a way of signing arbitrary messages.</p>
+
+      <p>This form can be used to verify that a message comes from a specific Bitcoin address.</p>
+    </ion-item>
+
+    <ion-item>
+      <ion-label floating>Address</ion-label>
+      <ion-input type="text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label floating>Signature</ion-label>
+      <ion-input type="text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label floating>Message</ion-label>
+      <ion-input type="text"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <button ion-button outline>Verify</button>
+    </ion-item>
+  </ion-list>
+
 </ion-content>

app/src/pages/verifyMessagePage/verifyMessagePage.ts

@@ -12,6 +12,6 @@ export class VerifyMessagePage {
 
   constructor(nav: NavController) {
     this.nav = nav;
-    this.title = 'Verify Message';
+    this.title = 'Verify Signed Message';
   }
 }