Skip to content

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

(feat): wallet token balance and service adjustments

parent c45fd44f
tokens-balance-2282
1 merge request!680WIP: token balance component
Pipeline #101831617 running with stages
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 63 deletions
src/app/common/components/chart-v2/chart-v2.component.html
View file @ 5cca6a47
......@@ -46,7 +46,7 @@
{{ hoverInfo.value | number: '1.3-3' }} ETH
</ng-template>
<ng-template ngSwitchCase="tokens">
{{ hoverInfo.value | number: '1.1-3' }} Tokens
{{ hoverInfo.value | number: '1.1-3' }} tokens
</ng-template>
<ng-template ngSwitchDefault>
{{ hoverInfo.value | number: '1.0-3' }} {{ rawData?.unit }}
......
src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.html
View file @ 5cca6a47
......@@ -14,13 +14,24 @@
>
</div>
</div>
<ng-container *ngTemplateOutlet="buyTokens"></ng-container>
<!-- <ng-container *ngTemplateOutlet="buyTokens"></ng-container> -->
<a class="m-walletBalance--tokens__buyButtonWrapper" routerLink="/tokens"
><m-shadowboxSubmitButton>Buy tokens</m-shadowboxSubmitButton></a
>
<!-- TODOOJM uncomment -->
<!-- <a class="m-walletBalance--tokens__buyButtonWrapper" routerLink="/tokens"
><m-shadowboxSubmitButton
[disabled]="!session.getLoggedInUser().rewards"
>Buy tokens</m-shadowboxSubmitButton
></a
> -->
</div>
<div class="m-walletBalance--tokens__equationSymbol">=</div>
<div class="m-walletBalance--tokens__balanceWrapper--subtotal">
<div class="m-walletBalance--tokens__balanceTitle">
Off-Chain<m-tooltip icon="help"
>A short description of Off-chain</m-tooltip
>Store tokens on our servers for quicker transaction times and no
fees</m-tooltip
>
</div>
<div class="m-walletBalance--tokens__balanceValWrapper">
......@@ -39,7 +50,8 @@
<div class="m-walletBalance--tokens__balanceWrapper--subtotal">
<div class="m-walletBalance--tokens__balanceTitle">
On-Chain<m-tooltip icon="help"
>A "short description of On-chain" lol</m-tooltip
>Store tokens on your device instead of our servers for more control
and portability</m-tooltip
>
</div>
<div class="m-walletBalance--tokens__balanceValWrapper">
......@@ -53,27 +65,31 @@
>
tokens
</div>
<a *ngIf="session.getLoggedInUser().rewards">Transfer to On-Chain</a>
<!-- TODOOJM uncomment -->
<a>Transfer to On-Chain</a>
<!-- <a *ngIf="session.getLoggedInUser().rewards">Transfer to On-Chain</a> -->
</div>
</div>
<div class="m-walletBalance--tokens__learnMore">
<a>Learn more</a> about tokens.
</div>
<div class="m-walletBalance--tokens__payout">
Daily estimated payout
<span>{{ estimatedTokenPayout | token: 18 | number: '1.0-3' }}</span>
Today's estimated payout
<span class="m-walletBalance--tokens__payoutEstimate">{{
estimatedTokenPayout | token: 18 | number: '1.0-3'
}}</span>
tokens. Next payout in
<span>{{ nextPayout | timediff }}</span> (Daily at 2:00am UTC)
</div>
</ng-container>
<ng-template #buyTokens>
<!-- <ng-template #buyTokens>
<a class="m-walletBalance--tokens__buyButtonWrapper" routerLink="/tokens"
><m-shadowboxSubmitButton [disabled]="!session.getLoggedInUser().rewards"
>Buy tokens</m-shadowboxSubmitButton
></a
>
</ng-template>
</ng-template> -->
<ng-template #loading>
<h2>...</h2>
......
src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.scss
View file @ 5cca6a47
m-walletBalance--tokens {
display: block;
margin: 50px 40px 34px 40px;
> * {
font-weight: 300;
font-size: 15px;
......@@ -19,17 +18,29 @@ m-walletBalance--tokens {
}
.m-walletBalance--tokens__buyButtonWrapper {
margin-left: 36px;
cursor: default;
min-width: 105px;
}
.m-walletBalance--tokens__balanceTitle {
position: relative;
m-tooltip {
position: relative;
margin-left: 4px;
.m-tooltip {
margin: 0;
}
}
.m-tooltip--bubble {
bottom: 18px;
margin-left: 12px;
min-width: 100px;
}
}
.m-walletBalance--tokens__balanceWrapper--subtotal:last-child {
.m-walletBalance--tokens__balanceTitle {
.m-tooltip--bubble {
bottom: 18px;
margin-left: 12px;
position: absolute;
right: -24px;
}
}
}
......@@ -104,6 +115,12 @@ m-walletBalance--tokens {
line-height: 16px;
margin-top: 10px;
}
.m-walletBalance--tokens__payoutEstimate {
font-weight: 500;
@include m-theme() {
color: themed($m-grey-500);
}
}
@media screen and (max-width: 800px) {
.m-walletBalance--tokens__equationLeft {
......
src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.ts
View file @ 5cca6a47
......@@ -7,6 +7,7 @@ import {
Input,
} from '@angular/core';
import { Client } from '../../../../services/api/client';
import { Subscription } from 'rxjs';
import { Session } from '../../../../services/session';
import { WalletDashboardService } from './../dashboard.service';
import * as BN from 'bn.js';
......@@ -29,25 +30,40 @@ export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {
onchainBalance;
inProgress = true;
protected updateTimer$;
nextPayout;
estimatedTokenPayout;
payoutSubscription: Subscription;
ngOnInit() {
this.tokenBalance = this.formatBalance(this.wallet.tokens.balance);
this.offchainBalance = this.formatBalance(this.wallet.offchain.balance);
this.onchainBalance = this.formatBalance(this.wallet.onchain.balance);
const payouts: any = this.walletService.getTokenPayoutOverview();
console.log('888', payouts);
this.nextPayout = payouts.nextPayout;
this.estimatedTokenPayout = payouts.currentReward;
this.getPayout();
this.inProgress = false;
this.updateTimer$ = setInterval(this.updateNextPayout.bind(this), 1000);
this.updateTimer$ = setInterval(this.updateNextPayout.bind(this), 60000);
this.detectChanges();
}
ngOnDestroy() {
clearInterval(this.updateTimer$);
if (this.payoutSubscription) {
this.payoutSubscription.unsubscribe();
}
}
async getPayout() {
try {
const result: any = await this.client.get(
`api/v2/blockchain/contributions/overview`
);
this.nextPayout = result.nextPayout;
this.estimatedTokenPayout = result.currentReward;
this.detectChanges();
} catch (e) {
console.error(e);
}
}
updateNextPayout() {
......@@ -70,13 +86,11 @@ export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {
if (balance.length > 18) {
formattedBalance.int = balance.slice(0, -18);
}
const decimals = balance.slice(-18);
const frac = balance.slice(-18);
console.log('888iszero?', !new BN(decimals).isZero());
if (!new BN(decimals).isZero() || decimals.slice(0, 3) !== '000') {
formattedBalance.frac = decimals;
if (!new BN(frac).isZero() || frac.slice(0, 3) !== '000') {
formattedBalance.frac = frac;
}
console.log('888', formattedBalance);
return formattedBalance;
}
......
src/app/modules/wallet/v2/dashboard.component.html
View file @ 5cca6a47
......@@ -19,11 +19,13 @@
></m-shadowboxHeader__tabs>
<div class="m-shadowboxLayout__body">
<m-walletBalance--tokens
[wallet]="wallet"
class="m-shadowboxLayout__body"
*ngIf="activeCurrencyId === 'tokens'"
></m-walletBalance--tokens>
<div class="m-walletDashboardBalances__wrapper">
<m-walletBalance--tokens
[wallet]="wallet"
class="m-shadowboxLayout__body"
*ngIf="activeCurrencyId === 'tokens'"
></m-walletBalance--tokens>
</div>
<div class="m-walletDashboardViews__wrapper">
<div class="m-walletDashboardViews__tabsContainer">
<div
......
src/app/modules/wallet/v2/dashboard.component.scss
View file @ 5cca6a47
......@@ -2,6 +2,7 @@ m-walletDashboard {
.m-shadowboxHeaderTab {
line-height: 21px;
.m-shadowboxHeaderTab__label {
margin-top: 10px;
font-size: 18px;
@include m-theme() {
color: themed($m-grey-800);
......@@ -19,7 +20,6 @@ m-walletDashboard {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
margin: 0 40px;
@include m-theme() {
border-bottom: 1px solid themed($m-grey-100);
}
......@@ -50,7 +50,6 @@ m-walletDashboard {
}
.m-walletDashboardViews__view {
display: block;
margin: 50px 57px 0 57px;
padding-bottom: 50px;
}
m-shadowboxSubmitButton {
......@@ -64,4 +63,25 @@ m-walletDashboard {
line-height: 20px;
}
}
.m-walletDashboardBalances__wrapper {
margin: 50px 40px 34px 40px;
}
.m-walletDashboardViews__tabsContainer {
margin: 0 40px;
}
.m-walletDashboardViews__view {
margin: 50px 57px 0 57px;
}
@media screen and (max-width: $min-tablet) {
.m-walletDashboardBalances__wrapper {
margin: 50px 24px 34px 24px;
}
.m-walletDashboardViews__tabsContainer,
.m-walletDashboardViews__view {
margin-left: 16px;
margin-right: 16px;
}
}
}
src/app/modules/wallet/v2/dashboard.component.ts
View file @ 5cca6a47
......@@ -60,7 +60,6 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
this.title.setTitle('Wallet');
this.wallet = this.walletService.getWallet();
console.log('888wallet', this.wallet);
this.route.paramMap.subscribe((params: ParamMap) => {
this.activeCurrencyId = params.get('currency');
......
src/app/modules/wallet/v2/dashboard.service.ts
View file @ 5cca6a47
import { Injectable } from '@angular/core';
// import { BehaviorSubject, Observable, combineLatest, of } from 'rxjs';
import { MindsHttpClient } from '../../../common/api/client.service';
// import { ShadowboxHeaderTab } from '../../../interfaces/dashboard';
import fakeData from './fake-data';
import { Client } from '../../../common/api/client.service';
import { Session } from '../../../services/session';
import { Web3WalletService } from '../../blockchain/web3-wallet.service';
import { TokenContractService } from '../../blockchain/contracts/token-contract.service';
import { BehaviorSubject, Observable } from 'rxjs';
import * as BN from 'bn.js';
import fakeData from './fake-data';
@Injectable()
export class WalletDashboardService {
walletLoaded: boolean = false;
walletLoaded = false;
totalTokens = 0;
wallet: any = {
......@@ -59,17 +59,19 @@ export class WalletDashboardService {
};
constructor(
private client: MindsHttpClient,
private client: Client,
protected web3Wallet: Web3WalletService,
protected tokenContract: TokenContractService
protected tokenContract: TokenContractService,
protected session: Session
) {}
getWallet() {
this.getTokenAccounts();
this.getStripeAccount();
this.getEthAccount();
this.getStripeAccount();
// this.wallet = fakeData.wallet;
// TODOOJM comment me
this.wallet = fakeData.wallet;
this.walletLoaded = true;
return this.wallet;
......@@ -114,7 +116,7 @@ export class WalletDashboardService {
this.wallet.onchain.address = address;
if (this.wallet.receiver.address === address) {
return; // don't re-add onchain to totalTokens
return; // don't re-add onchain balance to totalTokens
}
const onchainBalance = await this.tokenContract.balanceOf(address);
......@@ -138,29 +140,32 @@ export class WalletDashboardService {
}
async getStripeAccount() {
const stripeAccount = <any>(
await this.client.get('api/v2/payments/stripe/connect')
);
if (stripeAccount && stripeAccount.totalBalance) {
this.wallet.usd.value =
stripeAccount.totalBalance.amount + stripeAccount.pendingBalance.amount;
const merchant = this.session.getLoggedInUser().merchant;
if (merchant && merchant.service === 'stripe') {
try {
const stripeAccount = <any>(
await this.client.get('api/v2/payments/stripe/connect')
);
if (stripeAccount && stripeAccount.totalBalance) {
this.wallet.usd.value =
stripeAccount.totalBalance.amount +
stripeAccount.pendingBalance.amount;
}
return stripeAccount;
} catch (e) {
console.error(e);
}
} else {
return;
}
return stripeAccount;
}
async getStripeTransactions() {
const { transactions } = <any>(
await this.client.get('api/v2/payments/stripe/transactions')
);
return transactions;
}
async getTokenPayoutOverview(): Promise<any> {
try {
const result: any = await this.client.get(
`api/v2/blockchain/contributions/overview`
const { transactions } = <any>(
await this.client.get('api/v2/payments/stripe/transactions')
);
return result;
return transactions;
} catch (e) {
console.error(e);
}
......
src/app/modules/wallet/v2/fake-data.ts
View file @ 5cca6a47
......@@ -43,6 +43,26 @@ const fakeData = {
address: null,
},
},
payout: {
contributionValues: {
checkin: 0,
comments: 0,
reminds: 0,
votes: 0,
subscribers: 0,
jury_duty: 0,
onchain_tx: 0,
referrals: 0,
referrals_welcome: 0,
},
currentReward: '0',
nextPayout: 0,
totalNetworkContribution: 78507,
yourContribution: 0,
yourRewardFactor: 0,
yourShare: 0,
status: 'success',
},
// balances: {
// tokens: '777123456789987654321',
// offchain: '222123456789987654321',
......
src/app/modules/wallet/v2/sidebar-menu.default.ts
View file @ 5cca6a47
......@@ -5,11 +5,6 @@ const sidebarMenu = {
permissions: ['admin', 'user'],
},
links: [
{
id: 'wallet',
label: 'Wallet',
permissions: ['admin', 'user'],
},
{
id: 'earnings',
label: 'Earnings',
......
Please register or to comment