src/app/modules/wallet/balances/balance.component.scss

@@ -126,25 +126,35 @@ m-wallet--balance-money, m-wallet--balance-reward, m-wallet--balance-tokens {
   }
 }
 
+.m-wallet--balance--metamask {
+  margin-top: 16px;
 
-  .m-wallet--balance--metamask {
-    margin-top: 16px;
+  .m-wallet--balance--metamask-logo {
+    width: 50px;
+  }
 
-    .m-wallet--balance--metamask-logo {
-      width: 50px;
-    }
+  .m-btn--slim {
+    height: 30px;
+    margin: 0 0 0 28px;
+    color: #888; 
+  }
 
-    .m-btn--slim {
-      height: 30px;
-      margin: 0 0 0 28px;
-      color: #888; 
-    }
+  p {
+    text-align: left;
+    margin: 0;
+    padding: 0 8px;
+    color: #666;
+  }
 
-    p {
-      text-align: left;
-      margin: 0;
-      padding: 0 8px;
-      color: #666;
-    }
+}
 
-  }
\ No newline at end of file
+.m-walletBalance__purchaseBtns {
+  margin: 16px;
+  box-sizing: border-box;
+
+  .m-btn {
+    line-height: 32px;
+    text-decoration: none;
+    margin: 8px;
+  }
+}

src/app/modules/wallet/balances/tokens/balance.component.html

@@ -70,7 +70,41 @@
 
     </div>
 
+    <div class="m-wallet--balance--addresses-address">
+
+      <div class="m-wallet--balance--addresses-address-col">
+        <label class="m-wallet--balance--addresses-address-label">
+          <span i18n="@@WALLET__BALANCES__TOKENS__ADDRESS_LABEL">ETH Balance</span>
+
+          <m-tooltip icon="help">
+            ETH is required to purchase Minds Token and to fund OnChain transactions
+          </m-tooltip>
+        </label>
+      </div>
+
+      <div class="m-wallet--balance--addresses-address-col">
+        <span class="m-wallet--balance--addresses-address-balance">
+         {{ ethBalance | token: 18 | number }}
+       </span>
+     </div>
+
+    </div>
+
+  </div>
+
+  <div class="m-walletBalance__purchaseBtns" *ngIf="!isLocal">
+    <a routerLink="/tokens"
+      class="m-btn m-btn--slim m-btn--action"
+       >
+       Buy Tokens
+    </a>
+    <a [routerLink]="['/token', { 'purchaseEth': 'open' }]"
+      class="m-btn m-btn--slim m-btn--action"
+      >
+      Buy ETH
+    </a>
   </div>
+
   <div class="m-wallet--balance--metamask" *ngIf="isLocal">
       <p>Setup Your OnChain Address to buy send and receive crypto</p>
       <img class="m-wallet--balance--metamask-logo" [src]="minds.cdn_assets_url + 'assets/ext/metamask.png'" />

src/app/modules/wallet/balances/tokens/balance.component.spec.ts

 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
 
 import { WalletBalanceTokensComponent } from './balance.component';
 import { TokenPipe } from '../../../../common/pipes/token.pipe';
@@ -44,6 +45,9 @@ describe('WalletBalanceTokensComponent', () => {
     this.isLocal = jasmine.createSpy('getCurrentWallet').and.callFake(async () => {
       return false;
     });
+    this.getBalance = jasmine.createSpy('getBalance').and.callFake(async() => {
+      return 0;
+    });
   }
 
   const Web3WalletLocalServiceMock = new function () {
@@ -64,6 +68,7 @@ describe('WalletBalanceTokensComponent', () => {
   beforeEach(async(() => {
 
     TestBed.configureTestingModule({
+      imports: [ RouterTestingModule ],
       declarations: [
         TokenPipe,
         TooltipComponentMock,

src/app/modules/wallet/balances/tokens/balance.component.ts

@@ -18,6 +18,7 @@ export class WalletBalanceTokensComponent implements OnInit {
   inProgress: boolean = false;
   balance: number = 0;
   testnetBalance: number = 0;
+  ethBalance: string = '0';
   addresses: Array<any> = [];
   minds = window.Minds;
   isLocal:boolean = false;
@@ -38,6 +39,7 @@ export class WalletBalanceTokensComponent implements OnInit {
   async load() {
     await this.loadRemote();
     await this.loadLocal();
+    await this.loadEth();
     this.isLocal = await this.web3Wallet.isLocal();
     this.detectChanges();
   }
@@ -65,12 +67,22 @@ export class WalletBalanceTokensComponent implements OnInit {
         'address': address,
         'balance': balance[0].toString(),
       });
+
       this.detectChanges();
     } catch (e) {
       console.log(e);
     }
   }
 
+  async loadEth() {
+    const address = await this.web3Wallet.getCurrentWallet();
+    if (!address)
+      return;
+    const ethBalance = await this.web3Wallet.getBalance(address);
+    this.ethBalance = ethBalance ? ethBalance : '0';
+    this.detectChanges();
+  }
+
   async loadRemote() {
     this.inProgress = true;
     this.detectChanges();

src/app/modules/wire/creator/creator.component.ts

@@ -6,6 +6,7 @@ import { Client } from '../../../services/api';
 import { Session } from '../../../services/session';
 import { WireService } from '../wire.service';
 import { Web3WalletService } from '../../blockchain/web3-wallet.service';
+import { GetMetamaskComponent } from '../../blockchain/metamask/getmetamask.component';
 import { TokenContractService } from '../../blockchain/contracts/token-contract.service';
 import { MindsUser } from '../../../interfaces/entities';
 import { Router } from '@angular/router';
@@ -481,6 +482,19 @@ export class WireCreatorComponent {
       this.submitted = true;
       this.error = '';
 
+      if (await this.web3Wallet.isLocal()) {
+        const action = await this.web3Wallet.setupMetamask();
+        switch (action) {
+          case GetMetamaskComponent.ACTION_CREATE:
+            this.router.navigate(['/wallet']);
+            this.inProgress = false;
+            this.overlayModal.dismiss();
+            break;
+          case GetMetamaskComponent.ACTION_CANCEL:
+            return;
+        }
+      }
+
       let { done } = await this.wireService.submitWire(this.wire);
 
       if (done) {

src/app/modules/wire/payments-creator/creator.component.ts

@@ -7,6 +7,7 @@ import { Session } from '../../../services/session';
 import { WireService } from '../wire.service';
 import { Web3WalletService } from '../../blockchain/web3-wallet.service';
 import { TokenContractService } from '../../blockchain/contracts/token-contract.service';
+import { GetMetamaskComponent } from '../../blockchain/metamask/getmetamask.component';
 import { MindsUser } from '../../../interfaces/entities';
 import { Router } from '@angular/router';
 
@@ -371,6 +372,19 @@ export class WirePaymentsCreatorComponent {
       this.submitted = true;
       this.error = '';
 
+      if (await this.web3Wallet.isLocal()) {
+        const action = await this.web3Wallet.setupMetamask();
+        switch (action) {
+          case GetMetamaskComponent.ACTION_CREATE:
+            this.router.navigate(['/wallet']);
+            this.inProgress = false;
+            this.overlayModal.dismiss();
+            break;
+          case GetMetamaskComponent.ACTION_CANCEL:
+            return;
+        }
+      }
+
       let { done } = await this.wireService.submitWire(this.wire);
 
       if (done) {

src/tests/web3-wallet-service-mock.spec.ts

+import { and } from "@angular/router/src/utils/collection";
+
 // TODO actually implement these mocks when necessary for testing
 
 export let web3WalletServiceMock = new function () {
@@ -6,6 +8,7 @@ export let web3WalletServiceMock = new function () {
   this.onChainInterfaceLabel = 'Metamask';
   this.unavailable = false;
   this.locked = false;
+  this.isLocalWallet = false;
 
   this.isUnavailable = jasmine.createSpy('isUnavailable').and.callFake(() => {
     return this.unavailable;
@@ -29,6 +32,10 @@ export let web3WalletServiceMock = new function () {
     return this.balance;
   });
 
+  this.isLocal = jasmine.createSpy('isLocal').and.callFake(async () => {
+    return this.isLocalWallet;
+  });
+
   this.getOnChainInterfaceLabel = jasmine.createSpy('getOnChainInterfaceLabel').and.callFake(() => {
     return this.onChainInterfaceLabel ? this.onChainInterfaceLabel: 'Metamask';
   });