diff --git a/src/app/modules/wallet/balances/balance.component.scss b/src/app/modules/wallet/balances/balance.component.scss index b41350d3bde8d1aa8f2a403b51da5ec70b950b4d..955acf003d3ede00f4396b7ccbd98e33884740e4 100644 --- a/src/app/modules/wallet/balances/balance.component.scss +++ b/src/app/modules/wallet/balances/balance.component.scss @@ -125,3 +125,26 @@ m-wallet--balance-money, m-wallet--balance-reward, m-wallet--balance-tokens { } } } + + + .m-wallet--balance--metamask { + margin-top: 16px; + + .m-wallet--balance--metamask-logo { + width: 50px; + } + + .m-btn--slim { + height: 30px; + margin: 0 0 0 28px; + color: #888; + } + + p { + text-align: left; + margin: 0; + padding: 0 8px; + color: #666; + } + + } \ No newline at end of file diff --git a/src/app/modules/wallet/balances/tokens/balance.component.html b/src/app/modules/wallet/balances/tokens/balance.component.html index c10ca8daafd37d19d3a97972dc2a55b62f4dbb3e..e59831a0ee559e8b683cd884ef51d6a736748f94 100644 --- a/src/app/modules/wallet/balances/tokens/balance.component.html +++ b/src/app/modules/wallet/balances/tokens/balance.component.html @@ -33,12 +33,12 @@ <m-tooltip icon="help" *ngIf="address.label == 'OnChain & Receiver'" i18n="@@WALLET__BALANCES__TOKENS__ADDRESS_LABEL_TOOLTIP_ONCHAIN_AND_RECEIVER"> This is your currently active Web3/Metamask wallet and is also configured to receive Boost & Wires via the blockchain. </m-tooltip> + </label> <span class="m-wallet--balance--addresses-address-address"> {{address.address}} </span> </div> - <div class="m-wallet--balance--addresses-address-col"> <span class="m-wallet--balance--addresses-address-balance"> {{address.balance | token:18 | number}} @@ -71,7 +71,13 @@ </div> </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'" /> + <a href="https://metamask.io/" target="_blank"> + <button class="m-btn m-btn--slim m-btn--action">Download Metamask</button> + </a> + </div> <div class="m-wallet--balance--testnet m-border"> <p i18n="@@WALLET__BALANCES__TOKENS__RINKEBY_NOTICE"> Minds is currently running on the diff --git a/src/app/modules/wallet/balances/tokens/balance.component.spec.ts b/src/app/modules/wallet/balances/tokens/balance.component.spec.ts index 89a1f3ca5b717a5d4080552862008568203e994b..17600edef75042fbb32401763a456bc540992d9b 100644 --- a/src/app/modules/wallet/balances/tokens/balance.component.spec.ts +++ b/src/app/modules/wallet/balances/tokens/balance.component.spec.ts @@ -1,4 +1,4 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing'; import { WalletBalanceTokensComponent } from './balance.component'; import { TokenPipe } from '../../../../common/pipes/token.pipe'; @@ -12,7 +12,7 @@ import { DebugElement } from '@angular/core'; import { Session } from '../../../../services/session'; import { sessionMock } from '../../../../../tests/session-mock.spec'; -describe('WalletBalanceTokensComponent', () => { +fdescribe('WalletBalanceTokensComponent', () => { let comp: WalletBalanceTokensComponent; let fixture: ComponentFixture<WalletBalanceTokensComponent>; @@ -33,10 +33,26 @@ describe('WalletBalanceTokensComponent', () => { return fixture.debugElement.query(By.css(`.m-wallet--balance--addresses .m-wallet--balance--addresses-address:nth-child(${i}) .m-wallet--balance--addresses-address-col span.m-wallet--balance--addresses-address-balance`)); } + function getMetamaskDownload(): DebugElement { + return fixture.debugElement.query(By.css(`.m-wallet--balance--metamask`)); + } + const Web3WalletServiceMock = new function () { this.getCurrentWallet = jasmine.createSpy('getCurrentWallet').and.callFake(async () => { return '0xONCHAIN'; }); + this.isLocal = jasmine.createSpy('getCurrentWallet').and.callFake(async () => { + return false; + }); + } + + const Web3WalletLocalServiceMock = new function () { + this.getCurrentWallet = jasmine.createSpy('getCurrentWallet').and.callFake(async () => { + return '0xONCHAIN'; + }); + this.isLocal = jasmine.createSpy('getCurrentWallet').and.callFake(async () => { + return true; + }); } const TokenContractServiceMock = new function () { @@ -121,6 +137,15 @@ describe('WalletBalanceTokensComponent', () => { expect(getAddressBalance(3).nativeElement.textContent).toContain('9'); }); + it('should have a metamask download', () => { + expect(getMetamaskDownload()).not.toBeNull; + }); + + it('should not have a metamask download with a local wallet', () => { + TestBed.overrideProvider(Web3WalletService, { useValue: Web3WalletLocalServiceMock}); + expect(getMetamaskDownload()).toBeNull; + }); + xit('should have an onchainaddress', () => { expect(getAddressLabel(1).nativeElement.textContent).toContain('OnChain'); expect(getAddressAddress(1).nativeElement.textContent).toContain('0x123'); diff --git a/src/app/modules/wallet/balances/tokens/balance.component.ts b/src/app/modules/wallet/balances/tokens/balance.component.ts index dc9dd89729a45c60b6addb0b830b04e331aa8200..2687fc524956ec1baec9e4cf9ddb9223cc20112e 100644 --- a/src/app/modules/wallet/balances/tokens/balance.component.ts +++ b/src/app/modules/wallet/balances/tokens/balance.component.ts @@ -20,6 +20,8 @@ export class WalletBalanceTokensComponent implements OnInit { testnetBalance: number = 0; addresses: Array<any> = []; minds = window.Minds; + isLocal:boolean = false; + constructor( protected client: Client, @@ -36,10 +38,12 @@ export class WalletBalanceTokensComponent implements OnInit { async load() { await this.loadRemote(); await this.loadLocal(); + this.isLocal = await this.web3Wallet.isLocal(); + this.detectChanges(); } async loadLocal() { - + try { const address = await this.web3Wallet.getCurrentWallet(); if (!address)