Skip to content

Minds Frontend
Minds Frontend
Commit e6120dab authored by Olivia Madrid's avatar Olivia Madrid
Browse files
Options
  • Download

fake data removal cleanup

parent d352ede4
epic/wallet-80
1 merge request!686WIP: Epic/wallet 80
Pipeline #117855170 running with stages
Hide whitespace changes
Inline Side-by-side
Showing with 392 additions and 226 deletions
src/app/common/components/shadowbox-header-tabs/shadowbox-header-tabs.component.html
View file @ e6120dab
......@@ -41,13 +41,6 @@
: (tab.value | token: 18 | number: '1.0-3')
}}
</ng-template>
<ng-template ngSwitchCase="btc">
{{
friendlyVals
? (tab.value | number: '1.0-3')
: (tab.value | token: 18 | number: '1.0-3')
}}
</ng-template>
<ng-template ngSwitchCase="number">
{{ tab.value | number }}
</ng-template>
......@@ -59,6 +52,7 @@
: (tab.value / 100 | number: '1.2-2')
}}
</ng-template>
<ng-template ngSwitchCase="btc"> </ng-template>
<ng-template ngSwitchDefault>
{{ tab.value | number: '1.0-3' }}
</ng-template>
......
src/app/common/components/shadowbox-header/shadowbox-header.component.ts
View file @ e6120dab
......@@ -69,7 +69,6 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
@HostListener('click', ['$event'])
onClick($event) {
const targetMetric = $event.target;
console.log('clickevent', $event);
if (targetMetric.className === 'm-shadowboxHeader__overflowFade--left') {
this.slide('left');
} else {
......
src/app/modules/wallet/v2/balance-cash/balance-cash.component.html
View file @ e6120dab
<div class="m-walletBalance--cash" *ngIf="loaded">
<div *ngIf="!inProgress" class="m-walletBalance--cash__colContainer">
<div class="m-walletBalance--cash" *ngIf="!inProgress">
<div class="m-walletBalance---cash__onboardingNotice">
<p (click)="scrollToCashSettings.emit()">
<a>Add your bank information</a>
</p>
<p>Start receiving cash payouts by adding your bank details.</p>
</div>
<div class="m-walletBalance--cash__colContainer">
<!-- ---PENDING BALANCE ------------------------------------------------- -->
<div class="m-walletBalance--cash__col">
<div class="m-walletBalance--cash__colTitle">
Pending Balance<m-tooltip icon="help"
>TO DO: this is the total amount of wires and earnings that you will
receive. Add something about payout date being estimated. And might
take up to 7 days
>The total amount of cash you are scheduled to receive from wires
and/or earnings. The payout date is estimated and it may take up to 7
days before your balance reaches your bank account.
</m-tooltip>
</div>
<div class="m-walletBalance--cash__colValWrapper">
<span class="m-walletBalance--cash__colVal--int">{{
pendingBalance.int
| number: '1.0-0'
| currency: currency
| slice: 0:-3
}}</span
><span
class="m-walletBalance--cash__colVal--frac"
*ngIf="pendingBalance.frac"
>.{{ pendingBalance.frac }}</span
>
</div>
<div class="m-walletBalance--cash__colSubtitle">
<p>Estimated Payout</p>
<p>{{ nextPayoutDate }}</p>
<div class="m-walletBalance--cash__colValWrapper" *ngIf="!hasAccount">
<span class="m-walletBalance--cash__colVal--int">$0</span>
</div>
<ng-container *ngIf="hasAccount">
<div class="m-walletBalance--cash__colValWrapper">
<span class="m-walletBalance--cash__colVal--int">{{
pendingBalance.int
| number: '1.0-0'
| currency: currency
| slice: 0:-3
}}</span
><span
class="m-walletBalance--cash__colVal--frac"
*ngIf="pendingBalance.frac"
>.{{ pendingBalance.frac }}</span
>
</div>
<div class="m-walletBalance--cash__colSubtitle">
<p>Estimated Payout</p>
<p>{{ nextPayoutDate }}</p>
</div>
</ng-container>
</div>
<!-- ---TOTAL PAID OUT------------------------------------------------- -->
......@@ -71,7 +82,8 @@
<div class="m-walletBalance--cash__colSubtitle">
<p>
Go to <a routerLink="/analytics/dashboard/earnings">Pro Analytics</a>
Go to
<a routerLink="/analytics/dashboard/earnings">Pro Analytics</a>
</p>
</div>
</div>
......
src/app/modules/wallet/v2/balance-cash/balance-cash.component.scss
View file @ e6120dab
......@@ -11,7 +11,7 @@ m-walletBalance--cash {
}
.m-walletBalance--cash__colContainer {
display: flex;
justify-content: space-between;
justify-content: flex-start;
flex-flow: row wrap;
}
......@@ -43,6 +43,7 @@ m-walletBalance--cash {
.m-walletBalance--cash__col {
max-width: 200px;
margin-right: 18px;
.m-walletBalance--cash__colTitle {
font-size: 16px;
line-height: 21px;
......@@ -81,32 +82,38 @@ m-walletBalance--cash {
}
}
// .m-walletBalance--cash__colTitle {
// min-width: 78px;
// font-size: 16px;
// line-height: 21px;
// }
.m-walletBalance--cash__colValWrapper {
font-size: 13px;
line-height: 18px;
font-weight: 500;
margin-top: 8px;
}
// .m-walletBalance--cash__colVal--int {
// font-size: 16px;
// line-height: 21px;
// @include m-theme() {
// color: themed($m-grey-800);
// }
// }
// .m-walletBalance--cash__colVal--frac {
// font-size: 13px;
// line-height: 18px;
// }
a {
display: inline-block;
margin-top: 14px;
font-size: 14px;
line-height: 19px;
}
// ONBOARDING NOTICE ///////////////////////////
.m-walletBalance---cash__onboardingNotice {
margin-bottom: 30px;
padding: 20px 23px;
@include m-theme() {
border: 1px solid themed($m-borderColor--primary);
}
p {
font-size: 13px;
line-height: 18px;
margin: 0;
}
a {
font-size: 14px;
line-height: 19px;
margin: 0 0 3px 0;
text-decoration: underline;
cursor: pointer;
}
}
}
src/app/modules/wallet/v2/balance-cash/balance-cash.component.ts
View file @ e6120dab
......@@ -51,13 +51,14 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
this.detectChanges();
}
);
// TOOOJM toggle
this.isPro = true;
// this.isPro = this.configs.get('pro');
this.isPro = this.configs.get('pro');
this.load();
this.getProEarnings();
// this.loaded = true;
if (this.isPro) {
this.getProEarnings();
}
this.loaded = true;
this.detectChanges();
}
......@@ -68,7 +69,8 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
}
async load() {
// TODOOJM confirm that mark has migrated all stripe accts to monthly intervals
// TODOOJM confirm that Mark has migrated all stripe accts to monthly intervals
// TODOOJM OR just get the payout date from the stripe account itself
this.nextPayoutDate = moment()
.endOf('month')
.format('ddd Do MMM');
......@@ -92,6 +94,7 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
this.account.pendingBalance.amount) /
100;
console.log('888totalpaidoutraw', totalPaidOutRaw);
if (totalPaidOutRaw < 0) {
totalPaidOutRaw = 0;
}
......@@ -107,16 +110,14 @@ export class WalletBalanceCashComponent implements OnInit, OnDestroy {
this.inProgress = true;
this.detectChanges();
// try {
// const response: number = await this.walletService.getProEarnings();
// this.proEarnings = this.formatBalance(response);
// } catch (e) {
// console.error(e.message);
// this.proEarnings = this.formatBalance(0);
// }
this.proEarnings = this.formatBalance(123.4);
try {
const response: number = await this.walletService.getProEarnings();
this.proEarnings = this.formatBalance(response);
} catch (e) {
console.error(e.message);
this.proEarnings = this.formatBalance(0);
}
this.inProgress = false;
this.loaded = true;
this.detectChanges();
}
......
src/app/modules/wallet/v2/chart/chart.component.html
View file @ e6120dab
<ng-container *ngIf="!inProgress">
<ng-container *ngIf="!inProgress && dashboard">
<m-timespanFilter
[timespans]="dashboard.timespans"
[activeTimespanId]="activeTimespan.id"
......@@ -12,3 +12,6 @@
[segments]="activeMetric.visualisation.segments"
></m-chartV2>
</ng-container>
<div *ngIf="inProgress || !dashboard" class="m-wallet__spinner">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
src/app/modules/wallet/v2/chart/chart.component.scss
View file @ e6120dab
m-walletChart {
m-timespanFilter {
margin-right: 40px;
@media screen and (max-width: $max-mobile) {
margin-right: 20px;
}
}
.m-chartV2__chartContainer {
margin-top: 16px;
......
src/app/modules/wallet/v2/chart/chart.component.ts
View file @ e6120dab
......@@ -23,19 +23,17 @@ export class WalletChartComponent implements OnInit {
async load() {
this.inProgress = true;
let queryTsId = '1W';
if (this.init) {
queryTsId = this.activeTimespan.id;
}
const response: any = await this.walletService.getTokenChart(queryTsId);
const timespanId = this.init ? this.activeTimespan.id : '30d';
const response: any = await this.walletService.getTokenChart(timespanId);
if (response && response.dashboard) {
this.dashboard = response.dashboard;
this.dashboard.timespans = this.mapTimespanLabels(
response.dashboard.timespans
);
this.activeTimespan = this.dashboard.timespans.find(
ts => ts.selected === true
ts => ts.id === timespanId
);
const activeMetricId = this.dashboard.metric;
......@@ -65,7 +63,9 @@ export class WalletChartComponent implements OnInit {
};
timespans.forEach(t => {
t.label = labelMap[t.id];
if (labelMap[t.id]) {
t.label = labelMap[t.id];
}
});
return timespans;
......
src/app/modules/wallet/v2/dashboard.component.html
View file @ e6120dab
<m-pageLayout [menu]="menu">
<div *ngIf="inProgress" class="m-wallet__spinner">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
<m-pageLayout [menu]="menu" *ngIf="!inProgress">
<div class="m-walletDashboard" m-pageLayout__main *ngIf="currencies">
<m-dashboardLayout>
<ng-container m-dashboardLayout__header>
......@@ -70,11 +73,13 @@
<m-walletSettings--tokens
class="m-walletDashboardViews__view"
*ngIf="activeCurrencyId === 'tokens'"
(onchainAddressChanged)="loadWallet()"
#tokenSettings
></m-walletSettings--tokens>
<m-walletSettings--cash
class="m-walletDashboardViews__view"
*ngIf="activeCurrencyId === 'cash'"
(accountChanged)="loadWallet()"
#cashSettings
></m-walletSettings--cash>
<m-walletSettings--eth
......
src/app/modules/wallet/v2/dashboard.component.scss
View file @ e6120dab
......@@ -16,6 +16,14 @@
}
////////////////////////////////////////////
m-walletDashboard {
.m-wallet__spinner {
display: flex;
justify-content: space-around;
align-items: center;
}
m-tooltip {
z-index: 99999;
}
m-shadowboxHeader {
min-height: 103px;
}
......@@ -351,8 +359,8 @@ m-walletDashboard {
min-width: 100%;
max-width: 100%;
}
m-phoneInput input {
min-width: none;
.m-phoneInput__input {
min-width: 0;
}
}
}
......@@ -398,7 +406,7 @@ m-walletDashboard {
font-size: 14px;
line-height: 19px;
margin: 23px 0 0 0;
// font-weight: 300;
font-weight: 400; // TODOOJM - make this 300 on the install metamask page
@include m-theme() {
color: themed($m-textColor--tertiary);
}
......@@ -417,16 +425,15 @@ m-walletDashboard {
flex-flow: row wrap;
font-size: 15px;
line-height: 20px;
// font-weight: 300;
div:first-child {
margin-right: 18px;
margin: 0 18px 8px 0;
@include m-theme() {
color: themed($m-textColor--primary);
}
}
a {
font-size: 15px;
font-size: 14px;
line-height: 20px;
font-weight: 300;
}
......@@ -491,6 +498,9 @@ m-walletDashboard {
)
10 100%;
}
a {
font-weight: 300;
}
}
div {
display: flex;
......
src/app/modules/wallet/v2/dashboard.component.ts
View file @ e6120dab
......@@ -7,13 +7,12 @@ import {
Inject,
ViewChild,
ElementRef,
AfterViewInit,
OnDestroy,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Subscription } from 'rxjs';
import { WalletDashboardService } from './dashboard.service';
import { WalletDashboardService, Wallet } from './dashboard.service';
import { Session } from '../../../services/session';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import sidebarMenu from './sidebar-menu.default';
......@@ -34,7 +33,8 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
menu: Menu = sidebarMenu;
paramsSubscription: Subscription;
wallet = {};
wallet: Wallet;
inProgress: boolean = true;
activeCurrencyId: string;
activeViewId: string;
......@@ -78,8 +78,6 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
this.onboardingComplete = true;
}
this.wallet = this.walletService.getWallet();
this.paramsSubscription = this.route.paramMap.subscribe(
(params: ParamMap) => {
const currencyParam = params.get('currency');
......@@ -103,8 +101,7 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
this.detectChanges();
}
);
this.setCurrencies();
this.detectChanges();
this.loadWallet();
}
ngOnDestroy() {
......@@ -113,19 +110,41 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
}
}
async loadWallet() {
try {
this.wallet = await this.walletService.getWallet();
if (this.wallet) {
this.setCurrencies();
this.inProgress = false;
}
} catch (e) {
console.error(e);
}
this.detectChanges();
}
setCurrencies() {
const headerCurrencies = ['tokens', 'cash', 'eth', 'btc'];
this.currencies = [];
const headerCurrencies: string[] = ['tokens', 'cash', 'eth', 'btc'];
headerCurrencies.forEach(currency => {
const headerTab: ShadowboxHeaderTab = {
id: currency,
label: this.wallet[currency].label,
unit: this.wallet[currency].unit,
isLocalCurrency: currency === 'cash' ? true : false,
value: this.wallet[currency].balance,
isLocalCurrency: false,
};
if (currency !== 'btc') {
headerTab.value = this.wallet[currency].balance;
// Handle currency formatting for cash
if (currency === 'cash') {
if (this.wallet.cash.unit === 'cash') {
headerTab.unit = 'usd';
} else {
headerTab.isLocalCurrency = true;
}
}
this.currencies.push(headerTab);
this.detectChanges();
});
}
......
src/app/modules/wallet/v2/dashboard.service.ts
View file @ e6120dab
......@@ -4,58 +4,70 @@ import { Session } from '../../../services/session';
import { Web3WalletService } from '../../blockchain/web3-wallet.service';
import { TokenContractService } from '../../blockchain/contracts/token-contract.service';
import toFriendlyCryptoVal from '../../../helpers/friendly-crypto';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import fakeData from './fake-data';
export interface WalletCurrency {
label: string;
unit: string;
balance: number;
address: string | null;
}
export interface Wallet {
tokens: WalletCurrency;
offchain: WalletCurrency;
onchain: WalletCurrency;
receiver: WalletCurrency;
cash: WalletCurrency;
eth: WalletCurrency;
btc: WalletCurrency;
}
@Injectable()
export class WalletDashboardService {
walletLoaded = false;
totalTokens = 0;
wallet: any = {
wallet: Wallet = {
tokens: {
label: 'Tokens',
unit: 'tokens',
balance: '0',
balance: 0,
address: null,
},
offchain: {
label: 'Off-chain',
unit: 'tokens',
balance: '0',
balance: 0,
address: 'offchain',
},
onchain: {
label: 'On-chain',
unit: 'tokens',
balance: '0',
balance: 0,
address: null,
},
receiver: {
label: 'Receiver',
unit: 'tokens',
balance: '0',
balance: 0,
address: null,
},
cash: {
label: 'Cash',
unit: 'cash',
balance: '0',
balance: 0,
address: null,
},
eth: {
label: 'Ether',
unit: 'eth',
balance: '0',
balance: 0,
address: null,
},
btc: {
label: 'Bitcoin',
unit: 'btc',
balance: '0',
balance: 0,
address: null,
},
// loading: false,
};
constructor(
......@@ -65,13 +77,10 @@ export class WalletDashboardService {
protected session: Session
) {}
getWallet() {
this.getTokenAccounts();
this.getEthAccount();
this.getStripeAccount();
// TODOOJM toggle
// this.wallet = fakeData.wallet;
async getWallet() {
await this.getTokenAccounts();
await this.getEthAccount();
await this.getStripeAccount();
this.walletLoaded = true;
return this.wallet;
......@@ -141,7 +150,7 @@ export class WalletDashboardService {
this.wallet.onchain.balance
);
} catch (e) {
console.log(e);
console.error(e);
}
}
......@@ -159,25 +168,27 @@ export class WalletDashboardService {
}
async getStripeAccount() {
//TODOOJM toggle
// return fakeData.stripe_account.account;
const merchant = this.session.getLoggedInUser().merchant;
if (merchant && merchant.service === 'stripe') {
try {
const { account } = <any>(
await this.client.get('api/v2/payments/stripe/connect')
);
if (account && account.totalBalance) {
if (account) {
this.wallet.cash.address = 'stripe';
this.wallet.cash.balance =
(account.totalBalance.amount - account.pendingBalance.amount) / 100;
if (account.bankAccount) {
const c = account.bankAccount.currency;
this.wallet.cash.label = c.toUpperCase;
this.wallet.cash.unit = c;
const bankCurrency = account.bankAccount.currency;
this.wallet.cash.label = bankCurrency.toUpperCase;
this.wallet.cash.unit = bankCurrency;
} else {
// Has stripe account but not setup bank account
const defaultCurrency = account.pendingBalance.currency;
this.wallet.cash.label = defaultCurrency.toUpperCase;
this.wallet.cash.unit = defaultCurrency;
}
}
return account;
} catch (e) {
console.error(e);
......@@ -189,22 +200,12 @@ export class WalletDashboardService {
}
async createStripeAccount(form) {
console.log('stripeform', form);
try {
const response = <any>(
await this.client.post('api/v1/merchant/onboard', form)
await this.client.put('api/v2/wallet/usd/account', form)
);
return response;
} catch (e) {
console.error(e);
return e;
}
}
async updateStripeAccount(form) {
try {
const response = <any>(
await this.client.post('api/v2/payments/stripe/connect', form)
);
return response;
} catch (e) {
console.error(e);
......@@ -285,7 +286,6 @@ export class WalletDashboardService {
// TODOOJM toggle fake data
return response.transactions;
// return fakeData.stripe_payouts;
} catch (e) {
console.error(e);
return;
......@@ -293,31 +293,25 @@ export class WalletDashboardService {
}
async getTokenChart(activeTimespanId) {
const opts = { timespan: activeTimespanId };
// TODOOJM toggle
const opts = {
metric: 'token_balance',
timespan: activeTimespanId,
};
try {
const response = <any>(
await this.client.post(
'api/v2/analytics/dashboards/engagement?metric=token_balance',
opts
)
await this.client.get('api/v2/analytics/dashboards/token', opts)
);
return response;
} catch (e) {
console.error(e);
return e;
}
// return fakeData.token_chart;
}
async getProEarnings() {
// return 77.3;
try {
const response = <any>(
await this.client.post(
await this.client.get(
'api/v2/analytics/dashboards/earnings?metric=earnings_total&timespan=today'
)
);
......@@ -336,18 +330,10 @@ export class WalletDashboardService {
async getTokenTransactions(opts) {
try {
// TODOOJM uncomment
const response = <any>(
await this.client.get(`api/v2/blockchain/transactions/ledger`, opts)
);
return response;
// TODOOJM remove
// if (!opts.contract) {
// return fakeData.tx_tokens;
// } else {
// return fakeData.tx_tokens_filtered;
// }
} catch (e) {
console.error(e);
return;
......@@ -384,7 +370,6 @@ export class WalletDashboardService {
}
async getDailyTokenContributionScores(dateRangeOpts) {
// TODOOJM toggle
try {
const response: any = await this.client.post(
'api/v2/blockchain/contributions',
......@@ -398,6 +383,5 @@ export class WalletDashboardService {
console.error(e);
return false;
}
// return fakeData.pendingTokenRewards;
}
}
src/app/modules/wallet/v2/rewards-popup/rewards-popup.component.html
View file @ e6120dab
<div class="m-walletRewardsPopup">
<div *ngIf="inProgress">
<div *ngIf="inProgress" class="m-wallet__spinner">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
<div
......
src/app/modules/wallet/v2/rewards-popup/rewards-popup.component.ts
View file @ e6120dab
......@@ -4,6 +4,7 @@ import {
Input,
ChangeDetectionStrategy,
ChangeDetectorRef,
ViewRef,
} from '@angular/core';
import { WalletDashboardService } from '../dashboard.service';
......@@ -58,7 +59,9 @@ export class WalletRewardsPopupComponent implements OnInit {
this.detectChanges();
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
if (!(this.cd as ViewRef).destroyed) {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
}
src/app/modules/wallet/v2/settings-cash/cash-bank-form/cash-bank-form.component.html
View file @ e6120dab
......@@ -103,7 +103,7 @@
</div>
</div>
<div class="m-walletSettingsView--hasAccount__leaveMonetization">
<!-- <div class="m-walletSettingsView--hasAccount__leaveMonetization">
<h4>Leave Monetization Program</h4>
<p>
For security reasons, you won't be able to rejoin the monetization
......@@ -114,7 +114,7 @@
(click)="showModal = true; modalContent = 'leaveMonetization'"
>Leave Monetization Program</m-shadowboxSubmitButton
>
</div>
</div> -->
</ng-container>
<!-- CONFIRMATION MODAL: LEAVE EDIT MODE -------------------- -->
<m-walletModal
......
src/app/modules/wallet/v2/settings-cash/cash-bank-form/cash-bank-form.component.ts
View file @ e6120dab
......@@ -71,6 +71,7 @@ export class WalletCashBankFormComponent implements OnInit {
// this.detectChanges();
// }
async removeBank() {
this.showModal = false;
this.inProgress = true;
this.detectChanges();
......@@ -138,6 +139,7 @@ export class WalletCashBankFormComponent implements OnInit {
}
leaveEditMode() {
this.showModal = false;
this.editing = false;
this.form.reset();
this.detectChanges();
......
src/app/modules/wallet/v2/settings-cash/cash-onboarding-extras/cash-onboarding-extras.component.html
View file @ e6120dab
......@@ -110,23 +110,23 @@
>
<div class="m-walletForm__field--text">
<div class="m-walletForm__row--label">
<label for="personalId" i18n
<label for="personalIdNumber" i18n
>Personal ID / Social Security Number (SSN) / National Insurance
Number</label
>
</div>
<div class="m-walletForm__row--input">
<input
#personalId
id="personalId"
name="personalId"
#personalIdNumber
id="personalIdNumber"
name="personalIdNumber"
class="form-control"
data-minds="personalId"
data-minds="personalIdNumber"
/>
</div>
</div>
<m-shadowboxSubmitButton
(click)="updateField('id_number', personalId.value)"
(click)="updateField('id_number', personalIdNumber.value)"
[disabled]="inProgress"
[saving]="inProgress"
>Save</m-shadowboxSubmitButton
......
src/app/modules/wallet/v2/settings-cash/cash-onboarding/cash-onboarding.component.html
View file @ e6120dab
<div class="m-walletCashOnboarding">
<div class="m-walletCashOnboardingView--addDetails" *ngIf="!editing">
<p>Add your bank account details where cash rewards will be deposited.</p>
<m-shadowboxSubmitButton (click)="enterEditMode()" color="grey"
>Set up cash payments</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton (click)="enterEditMode()"
>Add your bank details</m-shadowboxSubmitButton
>`
</div>
<div class="m-walletCashOnboardingView--form" *ngIf="editing">
<form [formGroup]="form">
<p>Enter personal details to setup your cash payment account.</p>
<p>Enter personal details to start setting up your cash account.</p>
<!-- ------------------------------------------------------------ -->
<!-- **** INPUT: COUNTRY DROPDOWN -->
......@@ -87,15 +87,6 @@
class="form-control"
(selectedDateChange)="dob.setValue($event)"
></m-date__dropdowns>
<!-- <minds-date-input
id="dob"
name="dob"
class="form-control"
formControlName="dob"
data-minds="dob"
[date]="dob.value"
(dateChange)="dob.setValue($event)"
></minds-date-input> -->
</div>
</div>
......@@ -124,19 +115,19 @@
*ngIf="isCountry(['HK', 'SG'])"
>
<div class="m-walletForm__row--label">
<label for="personalId" i18n *ngIf="isCountry(['HK'])"
<label for="personalIdNumber" i18n *ngIf="isCountry(['HK'])"
>Hong Kong Identity Card (HKID)</label
>
<label for="personalId" i18n *ngIf="isCountry(['SG'])"
<label for="personalIdNumber" i18n *ngIf="isCountry(['SG'])"
>National Registration Identity Card (NRIC)</label
>
</div>
<div class="m-walletForm__row--input">
<input
type="text"
id="personalId"
name="personalId"
formControlName="personalId"
id="personalIdNumber"
name="personalIdNumber"
formControlName="personalIdNumber"
class="form-control"
/>
</div>
......@@ -267,10 +258,12 @@
<div class="m-walletForm__field--checkbox">
<div class="m-walletSettings__row--input">
<m-formInput__checkbox formControlName="stripeAgree">
I have read and agree to the
<a href="https://stripe.com/legal" target="_blank">
Stripe Services Agreement
</a>
<span
>I have read and agree to the
<a href="https://stripe.com/legal" target="_blank">
Stripe Services Agreement
</a></span
>
</m-formInput__checkbox>
</div>
</div>
......@@ -284,14 +277,14 @@
<!-- FORM BUTTONS -------------- -->
<div class="m-walletForm__buttonsContainer">
<m-shadowboxSubmitButton
(click)="toggleEditMode(false)"
(click)="showModal = true"
[disabled]="inProgress"
color="grey"
>Cancel</m-shadowboxSubmitButton
>
<m-shadowboxSubmitButton
(click)="createAccount()"
[disabled]="inProgress"
[disabled]="inProgress || form.invalid"
[saving]="inProgress"
>Update Personal Information</m-shadowboxSubmitButton
>
......
src/app/modules/wallet/v2/settings-cash/cash-onboarding/cash-onboarding.component.ts
View file @ e6120dab
......@@ -9,7 +9,7 @@ import {
import { FormBuilder, Validators } from '@angular/forms';
import { requiredFor, optionalFor } from './../settings-cash.validators';
import { WalletDashboardService } from '../../dashboard.service';
import { FormToastService } from '../../../../../common/services/form-toast.service';
import { Session } from '../../../../../services/session';
@Component({
selector: 'm-walletCashOnboarding',
......@@ -31,10 +31,12 @@ export class WalletCashOnboardingComponent implements OnInit {
private cd: ChangeDetectorRef,
protected walletService: WalletDashboardService,
private fb: FormBuilder,
private formToastService: FormToastService
protected session: Session
) {}
ngOnInit() {
this.user = this.session.getLoggedInUser();
this.form = this.fb.group({
country: ['US', Validators.required],
......@@ -59,10 +61,11 @@ export class WalletCashOnboardingComponent implements OnInit {
this.inProgress = true;
this.error = '';
console.log('createAccountFormval', this.form.value);
this.walletService
.createStripeAccount(this.form.value)
.then((response: any) => {
console.log('createAccount response', response);
console.log('createStripeAccount response', response);
if (!this.user.programs) {
this.user.programs = [];
......@@ -73,10 +76,11 @@ export class WalletCashOnboardingComponent implements OnInit {
id: response.id,
service: 'stripe',
};
this.detectChanges();
})
.catch(e => {
// TODO backend should include e.param and handle errors inline
// TODO backend should include e.param to allow inline error handling
this.error = e.message;
});
......@@ -93,6 +97,7 @@ export class WalletCashOnboardingComponent implements OnInit {
this.detectChanges();
}
leaveEditMode() {
this.showModal = false;
this.editing = false;
this.form.reset();
this.detectChanges();
......
src/app/modules/wallet/v2/settings-cash/settings-cash.component.scss
View file @ e6120dab
......@@ -47,6 +47,9 @@ m-walletSettings--cash {
m-walletCashOnboarding {
.m-walletForm__field--checkbox {
margin-top: 100px;
span {
font-size: 14px;
}
}
}
}
src/app/modules/wallet/v2/settings-cash/settings-cash.component.ts
View file @ e6120dab
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import {
Component,
OnInit,
ChangeDetectorRef,
Output,
EventEmitter,
} from '@angular/core';
import { WalletDashboardService } from '../dashboard.service';
import { Session } from '../../../../services/session';
......@@ -7,6 +13,9 @@ import { Session } from '../../../../services/session';
templateUrl: './settings-cash.component.html',
})
export class WalletSettingsCashComponent implements OnInit {
@Output() accountChanged: EventEmitter<any> = new EventEmitter<any>();
@Output() scrollToCashSettings: EventEmitter<any> = new EventEmitter<any>();
loaded: boolean = false;
inProgress: boolean = true;
user;
......@@ -61,7 +70,8 @@ export class WalletSettingsCashComponent implements OnInit {
// 3. (if necessary) extras
// 4. (once verified) bank
this.view = null;
const previousView = this.view;
// this.view = null;
this.inProgress = true;
this.detectChanges();
......@@ -82,6 +92,9 @@ export class WalletSettingsCashComponent implements OnInit {
this.view = 'extras';
}
}
if (this.loaded && previousView === this.view && this.view !== 'error') {
this.accountChanged.emit();
}
this.inProgress = false;
this.detectChanges();
}
......@@ -94,8 +107,7 @@ export class WalletSettingsCashComponent implements OnInit {
.getStripeAccount()
.then((account: any) => {
this.account = account;
// console.log('888 this account', this.account);
// this.setView();
this.setView();
})
.catch(e => {
this.error = e.message;
......
src/app/modules/wallet/v2/settings-eth/settings-eth.component.html
View file @ e6120dab
<div class="m-walletSettings" *ngIf="wallet">
<div class="m-walletSettings" *ngIf="ethWallet">
<h2>Ether Address</h2>
<p>
Your Ether address is the same as your on-chain address.<m-tooltip
......@@ -12,10 +12,10 @@
To view or change your address, go to
<a (click)="scrollToTokenSettings.emit()">token settings</a>.
</p>
<div *ngIf="wallet.onchain.address">
<div *ngIf="ethWallet.address" class="m-walletSettings--eth__balanceWrapper">
<div>
<p class="m-walletForm__row--label">Ether total</p>
<p>{{ wallet.eth.balance }}</p>
<p class="m-walletSettings--eth__balanceLabel">Ether total</p>
<p class="m-walletSettings--eth__balanceVal">{{ ethWallet.balance }}</p>
</div>
<m-shadowboxSubmitButton [routerLink]="['/token', { purchaseEth: 'open' }]">
Buy Ether
......
src/app/modules/wallet/v2/settings-eth/settings-eth.component.scss
View file @ e6120dab
m-walletSettings--eth {
.m-walletSettings--eth__balanceWrapper {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
justify-content: space-between;
max-width: 260px;
margin-top: 56px;
& > div {
margin-right: 24px;
}
}
.m-walletSettings--eth__balanceLabel {
font-size: 16px;
line-height: 21px;
margin: 0 0 3px 0;
}
.m-walletSettings--eth__balanceVal {
font-size: 24px;
line-height: 32px;
margin: 0;
@include m-theme() {
color: themed($m-textColor--primary);
}
}
}
src/app/modules/wallet/v2/settings-eth/settings-eth.component.ts
View file @ e6120dab
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { WalletDashboardService } from '../dashboard.service';
import {
Component,
OnInit,
Output,
EventEmitter,
ChangeDetectorRef,
} from '@angular/core';
import { WalletDashboardService, WalletCurrency } from '../dashboard.service';
@Component({
selector: 'm-walletSettings--eth',
templateUrl: './settings-eth.component.html',
})
export class WalletSettingsETHComponent implements OnInit {
wallet;
showModal = false;
ethWallet: WalletCurrency;
@Output() scrollToTokenSettings: EventEmitter<any> = new EventEmitter();
constructor(protected walletService: WalletDashboardService) {}
constructor(
protected walletService: WalletDashboardService,
private cd: ChangeDetectorRef
) {}
ngOnInit() {
this.load();
}
load() {
this.wallet = this.walletService.getWallet();
async load() {
this.ethWallet = await this.walletService.getEthAccount();
console.log('ethw', this.ethWallet);
this.detectChanges();
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
src/app/modules/wallet/v2/settings-tokens/settings-tokens.component.html
View file @ e6120dab
......@@ -38,18 +38,16 @@
</ng-container>
<ng-container *ngIf="linkingMetamask">
<ng-container *ngIf="hasExternal">
<p *ngIf="providedAddress">
<!-- <p *ngIf="providedAddress">
{{ providedAddress }}
</p>
</p> -->
<p *ngIf="!providedAddress">
MetaMask is either locked or connected to another network.
</p>
</ng-container>
<p *ngIf="hasExternal && providedAddress">
<!-- <p *ngIf="hasExternal && providedAddress">
Please ensure you select the "Main Ethereum Network".
</p>
</p> -->
<p *ngIf="downloadingMetamask">
Note: You might need to reload Minds after installing and setting up
MetaMask.
......
src/app/modules/wallet/v2/settings-tokens/settings-tokens.component.ts
View file @ e6120dab
......@@ -77,6 +77,7 @@ export class WalletSettingsTokensComponent implements OnInit, OnDestroy {
}
// TODOOJM add fx to reload whenever the current setting is updated
ngOnInit() {
this.load();
}
......@@ -124,7 +125,7 @@ export class WalletSettingsTokensComponent implements OnInit, OnDestroy {
} catch (e) {
console.error(e);
// TODOOJM get rid of form toast
this.formToastService.error(e);
// this.formToastService.error(e);
} finally {
this.inProgress = false;
this.detectChanges();
......@@ -172,7 +173,7 @@ export class WalletSettingsTokensComponent implements OnInit, OnDestroy {
} catch (e) {
console.error(e);
// TODOOJM get rid of form toast
this.formToastService.error(e);
// this.formToastService.error(e);
this.inProgress = false;
}
}
......@@ -228,6 +229,7 @@ export class WalletSettingsTokensComponent implements OnInit, OnDestroy {
async useExternal() {
this.linkingMetamask = true;
this.inProgress = true;
await this.web3Wallet.ready();
this.detectExternal();
if (isPlatformBrowser(this.platformId)) {
......@@ -237,6 +239,7 @@ export class WalletSettingsTokensComponent implements OnInit, OnDestroy {
}
}, 1000);
}
this.detectChanges();
}
async detectExternal() {
......@@ -245,12 +248,36 @@ export class WalletSettingsTokensComponent implements OnInit, OnDestroy {
if (this.providedAddress !== address) {
this.providedAddress = address;
this.currentAddress = address;
if (isPlatformBrowser(this.platformId)) {
if (address) {
clearInterval(this._externalTimer);
// this.provideAddress();
this.provideMetamaskAddress(address);
this.detectChanges();
}
}
this.detectChanges();
}
}
if (this.providedAddress) {
clearInterval(this._externalTimer);
this.provideAddress();
}
async provideMetamaskAddress(address) {
try {
this.inProgress = true;
this.detectChanges();
await this.blockchain.setWallet({ address: address });
this.currentAddress = address;
this.display = Views.CurrentAddress;
this.addressSetupComplete.emit();
} catch (e) {
// TODOOJM get rid of form toast
this.formToastService.error(e);
console.error(e);
} finally {
this.inProgress = false;
this.linkingMetamask = false;
this.detectChanges();
}
}
......
src/app/modules/wallet/v2/token-onboarding/token-onboarding.component.scss
View file @ e6120dab
......@@ -39,6 +39,10 @@ m-walletTokenOnboarding {
@include m-theme() {
border-right: 1px solid themed($m-grey-50);
}
.m-walletTokenOnboardingModal__view--verifyPhone {
margin-top: 12px;
}
}
.m-walletTokenOnboardingStep__title {
font-weight: 500;
......@@ -76,6 +80,13 @@ m-walletTokenOnboarding {
}
}
.m-walletForm__wrapper {
margin-bottom: 38px;
}
.m-phoneInput__countryList {
max-height: 114px;
}
// ***************************************************
@media screen and (max-width: $max-mobile) {
[class*='m-walletTokenOnboardingStep--'] {
......
src/app/modules/wallet/v2/transactions-cash/transactions-cash.component.ts
View file @ e6120dab
......@@ -4,6 +4,7 @@ import {
Component,
Input,
OnInit,
ViewRef,
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Client } from '../../../../services/api/client';
......@@ -50,6 +51,8 @@ export class WalletTransactionsCashComponent implements OnInit {
async getStripeAccount() {
const account = await this.walletService.getStripeAccount();
if (!account) {
this.init = true;
this.detectChanges();
return;
} else {
if (account.bankAccount) {
......@@ -57,7 +60,6 @@ export class WalletTransactionsCashComponent implements OnInit {
}
this.runningTotal = account.pendingBalance.amount / 100;
this.detectChanges();
}
......@@ -217,7 +219,9 @@ export class WalletTransactionsCashComponent implements OnInit {
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
if (!(this.cd as ViewRef).destroyed) {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
}
src/app/modules/wallet/v2/transactions-table/transactions-table.component.scss
View file @ e6120dab
......@@ -72,6 +72,11 @@ m-walletTransactionsTable {
}
}
}
.m-walletTransactionsTable__typeWrapper {
&.containsPopover {
cursor: defaut;
}
}
.m-walletTransactionsTable__avatar {
border-radius: 100%;
......
src/app/modules/wallet/v2/transactions-tokens/transactions-tokens.component.html
View file @ e6120dab
......@@ -8,7 +8,7 @@
Upcoming
</div>
<div
class="m-walletTransactionsTable__typeWrapper"
class="m-walletTransactionsTable__typeWrapper containsPopover"
(mouseenter)="showRewardsPopup = true"
(mouseleave)="showRewardsPopup = false"
>
......
src/app/modules/wallet/v2/transactions-tokens/transactions-tokens.component.ts
View file @ e6120dab
......@@ -4,6 +4,7 @@ import {
Component,
OnInit,
OnDestroy,
ViewRef,
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Client } from '../../../../services/api/client';
......@@ -36,6 +37,7 @@ export class WalletTransactionsTokensComponent implements OnInit, OnDestroy {
showRewardsPopup: boolean = false;
startOfToday = moment().startOf('day');
// For admins viewing a remote user's transactions
remote: boolean = false;
remoteUsername: string = '';
......@@ -107,10 +109,10 @@ export class WalletTransactionsTokensComponent implements OnInit, OnDestroy {
async getBalance() {
const tokenAccounts = await this.walletService.getTokenAccounts();
this.runningTotal = tokenAccounts.tokens.balance;
this.load(true);
this.loadTransactions(true);
}
async load(refresh: boolean) {
async loadTransactions(refresh: boolean) {
if (this.inProgress && !refresh) {
return;
}
......@@ -276,7 +278,9 @@ export class WalletTransactionsTokensComponent implements OnInit, OnDestroy {
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
if (!(this.cd as ViewRef).destroyed) {
this.cd.markForCheck();
this.cd.detectChanges();
}
}
}
src/app/modules/wallet/v2/wallet-v2.module.ts
View file @ e6120dab
import { NgModule } from '@angular/core';
import { NgModule, PLATFORM_ID } from '@angular/core';
import { CommonModule as NgCommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
......@@ -25,6 +25,12 @@ import { WalletTransactionsCashComponent } from './transactions-cash/transaction
import { WalletCashOnboardingComponent } from './settings-cash/cash-onboarding/cash-onboarding.component';
import { WalletCashOnboardingExtrasComponent } from './settings-cash/cash-onboarding-extras/cash-onboarding-extras.component';
import { WalletCashBankFormComponent } from './settings-cash/cash-bank-form/cash-bank-form.component';
import { Web3WalletService } from '../../blockchain/web3-wallet.service';
import { LocalWalletService } from '../../blockchain/local-wallet.service';
import { TransactionOverlayService } from '../../blockchain/transaction-overlay/transaction-overlay.service';
import { ConfigsService } from '../../../common/services/configs.service';
import { TokenContractService } from '../../blockchain/contracts/token-contract.service';
import { WithdrawContractService } from '../../blockchain/contracts/withdraw-contract.service';
//////////////////////////////////////////////////
// TODO add a wildcard and the parameter routes as children once feature-flag is lifted
......@@ -90,6 +96,21 @@ export const WALLET_V2_ROUTES: Routes = [
WalletCashBankFormComponent,
],
exports: [WalletDashboardComponent],
providers: [WalletDashboardService],
providers: [
WalletDashboardService,
{
provide: Web3WalletService,
useFactory: Web3WalletService._,
deps: [
LocalWalletService,
TransactionOverlayService,
PLATFORM_ID,
ConfigsService,
],
},
TokenContractService,
WithdrawContractService,
ConfigsService,
],
})
export class WalletV2Module {}
Please register or to comment