Merge pull request #553 from logion-network/feature/improve-wallet

Improve wallet and vault screens

package.json

@@ -212,7 +212,8 @@
     "snapshotFormat": {
       "escapeString": true,
       "printBasicPrototype": true
-    }
+    },
+    "workerIdleMemoryLimit": "512MB"
   },
   "babel": {
     "presets": [

src/common/AssetNameCell.tsx

@@ -0,0 +1,15 @@
+import { CoinBalance } from "@logion/node-api";
+import CoinName from "src/components/coin/CoinName";
+
+export interface Props {
+    balance: CoinBalance;
+}
+
+export default function AssetNameCell(props: Props) {
+
+    return (
+        <div className="asset-name-cell">
+            <span className="name"><CoinName coinId={ props.balance.coin.id }/> ({ props.balance.available.prefix.symbol }{ props.balance.coin.symbol })</span>
+        </div>
+    );
+}

src/common/BalanceDetails.css

@@ -13,9 +13,3 @@
     display: inline-block;
     width: 130px;
 }
-
-.BalanceDetails.arc {
-    width: 300px;
-    padding-top: 40px;
-    padding-bottom: 30px;
-}

src/common/BalanceDetails.tsx

@@ -4,12 +4,11 @@ import "./BalanceDetails.css";
 
 export interface Props {
     balance: CoinBalance;
-    type: 'arc' | 'linear';
 }
 
 export default function BalanceDetails(props: Props) {
     return (
-        <div className={ `BalanceDetails ${props.type}` }>
+        <div className="BalanceDetails">
             <div className="detail">
                 <div className="label">Available:</div>
                 <div className="amount">

src/common/Gauge.css

@@ -2,21 +2,6 @@
     position: relative;
 }
 
-.Gauge.arc .reading {
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
-    background-image: url("../img/gauge.svg");
-    background-size: contain;
-    background-position: center 100%;
-    background-repeat: no-repeat;
-    height: 240px;
-}
-
-.Gauge.arc.light .reading {
-    background-image: url("../img/gauge-light.svg");
-}
-
 .Gauge .reading .value-unit {
     display: flex;
     align-items: baseline;
@@ -47,36 +32,20 @@
     align-items: baseline;
 }
 
-.Gauge.linear:before {
-    content: " ";
-    display: block;
-    background-image: url("../img/linear-gauge.svg");
-    background-size: contain;
-    background-position: center 100%;
-    background-repeat: no-repeat;
-    width: 600px;
-    height: 15px;
-    margin-right: 20px;
-}
-
-.Gauge.linear.light:before {
-    background-image: url("../img/linear-gauge-light.svg");
-}
-
-.Gauge.linear .reading {
+.Gauge .reading {
     margin-right: 40px;
 }
 
-.Gauge.linear .reading .value .integer-part {
+.Gauge .reading .value .integer-part {
     line-height: 1;
 }
 
-.Gauge.linear .reading .value-unit {
+.Gauge .reading .value-unit {
     padding-top: 0;
 }
 
 @media (max-width: 1385px) {
-    .Gauge.linear:before {
+    .Gauge:before {
         width: 200px;
     }
     .Gauge .reading .value .integer-part {

src/common/Gauge.test.tsx

@@ -2,21 +2,15 @@ import { shallowRender } from '../tests';
 
 import Gauge from './Gauge';
 
-test("renders arc", () => {
-    testGauge('arc');
-});
-
-function testGauge(type: 'arc' | 'linear') {
-    const result = shallowRender(<Gauge
-        readingIntegerPart={ "99" }
-        readingDecimalPart={ "00" }
-        unit={ "mLGNT" }
-        level={ 0.5 }
-        type={ type }
-    />);
-    expect(result).toMatchSnapshot();
-}
+describe("Gauge", () => {
 
-test("renders linear", () => {
-    testGauge('linear');
+    it("renders", () => {
+        const result = shallowRender(<Gauge
+            readingIntegerPart={ "99" }
+            readingDecimalPart={ "00" }
+            unit={ "mLGNT" }
+            level={ 0.5 }
+        />);
+        expect(result).toMatchSnapshot();
+    });    
 });

src/common/Gauge.tsx

@@ -6,7 +6,6 @@ export interface Props {
     readingDecimalPart?: string,
     unit: string,
     level: number,
-    type: 'arc' | 'linear',
 }
 
 const RED: string = '#ea1f46';
@@ -26,7 +25,7 @@ export default function Gauge(props: Props) {
     }
 
     return (
-        <div className={ `Gauge ${props.type} ${colorTheme.type}` }>
+        <div className={ `Gauge ${colorTheme.type}` }>
             <div className="reading">
                 <div className="value-unit">
                     <div className="value"

src/common/TransactionType.tsx

@@ -1,7 +1,6 @@
-import { Transaction } from "@logion/client/dist/TransactionClient.js";
+import { Transaction } from "@logion/client";
 
 import { Cell } from "./Table";
-import { WalletType } from "./Wallet";
 import {
     PalletLogionLocCall,
     PalletLogionVaultCall,
@@ -10,6 +9,7 @@ import {
     PalletLoAuthorityListCall,
     PalletMultisigCall
 } from "@polkadot/types/lookup";
+import { WalletType } from "./Transactions";
 
 export interface Props {
     transaction: Transaction;

src/common/Transactions.css

@@ -62,12 +62,6 @@
     height: calc(86vh - 620px);
 }
 
-.Transactions .request-vault-out {
-    position: absolute;
-    top: 25px;
-    right: 25px;
-}
-
 .Transactions .gauge-title {
     display: flex;
     justify-content: center;

src/common/Transactions.test.tsx

@@ -12,7 +12,6 @@ import { BalanceState } from '@logion/client/dist/Balance.js';
 test('renders null with missing data', () => {
     const result = shallowRender(<Transactions
         address="123"
-        backPath={ "back" }
         balances={ [] }
         transactions={ [] }
         type="Wallet"
@@ -28,7 +27,6 @@ test('renders with all data', () => {
     } as BalanceState);
     const result = shallowRender(<Transactions
         address="123"
-        backPath={ "back" }
         balances={ [] }
         transactions={ [] }
         type="Wallet"
@@ -44,7 +42,6 @@ test('renders failed transaction', () => {
     } as BalanceState);
     const result = shallowRender(<Transactions
         address="123"
-        backPath={ "back" }
         balances={ [] }
         transactions={ [] }
         type="Wallet"