web/satellite: show full account balance in billing overview

With the new UI, we stopped displaying stripe credits on the billing
overview page. To remedy, sum credit balance with coin balance and
change the card title from STORJ Token Balance to Account Balance.

closes #1420

Change-Id: I879500c53ea35d0571c33a2ddb43aa48e1458815

web/satellite/src/types/payments.ts

@@ -183,6 +183,9 @@ export class AccountBalance {
         return this.credits + (this.coins * 100);
     }
 
+    public get formattedSum(): string {
+        return formatPrice((this.sum / 100).toString());
+    }
     public hasCredits(): boolean {
         return parseFloat(this._credits) !== 0;
     }

web/satellite/src/utils/strings.ts

@@ -31,7 +31,7 @@ export function decimalShift(decimal: string, places: number): string {
     const dotIdx = (decimal.includes('.') ? decimal.indexOf('.') : decimal.length) - places;
 
     if (dotIdx < 0) {
-        const frac = whole.padStart(whole.length-dotIdx, '0').replace(/0+$/, '');
+        const frac = whole.padStart(whole.length - dotIdx, '0').replace(/0+$/, '');
         if (!frac) {
             return '0';
         }
@@ -115,7 +115,7 @@ export function humanizeArray(arr: string[]): string {
     case 0: return '';
     case 1: return arr[0];
     case 2: return arr.join(' and ');
-    default: return `${arr.slice(0, len-1).join(', ')}, and ${arr[len-1]}`;
+    default: return `${arr.slice(0, len - 1).join(', ')}, and ${arr[len - 1]}`;
     }
 }
 
@@ -131,14 +131,14 @@ export function hexToBase64(str: string): string {
         throw new Error(`Invalid length ${str.length} for hex string`);
     }
 
-    const bytes = new Uint8Array(str.length/2);
+    const bytes = new Uint8Array(str.length / 2);
     for (let i = 0; i < str.length; i += 2) {
-        const byteStr = str.substring(i, i+2);
+        const byteStr = str.substring(i, i + 2);
         const n = parseInt(byteStr, 16);
         if (isNaN(n)) {
             throw new Error(`Invalid hex byte '${byteStr}' at position ${i}`);
         }
-        bytes[i/2] = parseInt(str.substring(i, i+2), 16);
+        bytes[i / 2] = parseInt(str.substring(i, i + 2), 16);
     }
 
     let out = '';
@@ -150,18 +150,18 @@ export function hexToBase64(str: string): string {
             out += b64Chars[nextSextet];
             break;
         }
-        nextSextet |= (bytes[i+1] & 0b11110000) >> 4;
+        nextSextet |= (bytes[i + 1] & 0b11110000) >> 4;
         out += b64Chars[nextSextet];
 
-        nextSextet = (bytes[i+1] & 0b00001111) << 2;
+        nextSextet = (bytes[i + 1] & 0b00001111) << 2;
         if (i + 2 >= bytes.length) {
             out += b64Chars[nextSextet];
             break;
         }
-        nextSextet |= (bytes[i+2] & 0b11000000) >> 6;
+        nextSextet |= (bytes[i + 2] & 0b11000000) >> 6;
         out += b64Chars[nextSextet];
 
-        out += b64Chars[bytes[i+2] & 0b00111111];
+        out += b64Chars[bytes[i + 2] & 0b00111111];
     }
 
     if (out.length % 4) {

web/satellite/src/views/Billing.vue

@@ -63,13 +63,13 @@
                     </v-col>
 
                     <v-col cols="12" sm="4">
-                        <v-card title="STORJ Token Balance" subtitle="Your STORJ Token Wallet" variant="flat" :border="true" rounded="xlg">
+                        <v-card title="Account Balance" subtitle="Your STORJ account balance" variant="flat" :border="true" rounded="xlg">
                             <template #loader>
                                 <v-progress-linear v-if="isLoading" indeterminate />
                             </template>
                             <v-card-text>
                                 <v-chip rounded color="green" variant="tonal" class="font-weight-bold mb-2">
-                                    {{ formattedTokenBalance }}
+                                    {{ formattedAccountBalance }}
                                 </v-chip>
                                 <v-divider class="my-4" />
                                 <v-btn variant="outlined" color="default" size="small" class="mr-2" :prepend-icon="mdiPlus" @click="onAddTokensClicked">
@@ -298,10 +298,10 @@ const priceSummary = computed((): number => {
 });
 
 /**
- * Returns STORJ token balance from store.
+ * Returns account balance (sum storjscan and stripe credit) from store.
  */
-const formattedTokenBalance = computed((): string => {
-    return billingStore.state.balance.formattedCoins;
+const formattedAccountBalance = computed((): string => {
+    return billingStore.state.balance.formattedSum;
 });
 
 /**