Wallet layout

src/components/appLayout.tsx

@@ -17,7 +17,7 @@ import { Dropdown, Icon, Layout, Menu, Spin, Button } from 'antd';
 import { CONFIG } from '../config';
 import AppLogo from './appLogo';
 import Message from './message';
-import TokenValue from './tokenValue';
+import TokenBalances from './tokenBalances';
 
 import '../style.css';
 
@@ -121,6 +121,12 @@ class AppLayout extends Component<AppLayoutProps, any> {
           <MediaQuery minWidth={1049}>{menu(true)}</MediaQuery>
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <span className="balance">
+              {web3InjectedStore.available && web3InjectedStore.instance && (
+                <div style={{ lineHeight: '21px' }}>
+                  <TokenBalances color={selectedTokenStore.color} />
+                </div>
+              )}
+
               {web3InjectedStore.available && !web3InjectedStore.instance && (
                 <Button
                   onClick={() => {

src/components/colorBadge.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { colorFromAddr } from '../utils';
+
+interface ColorBadgeProps {
+  address: string;
+}
+
+const ColorBadge: React.FC<ColorBadgeProps> = ({ address }) => {
+  return (
+    <span
+      style={{
+        backgroundColor: colorFromAddr(address, 80, 50),
+        width: 10,
+        height: 10,
+        display: 'inline-block',
+        borderRadius: '50%',
+        marginLeft: 5,
+      }}
+    />
+  );
+};
+
+export default ColorBadge;

src/components/finalizeExitButton.tsx

@@ -58,7 +58,7 @@ export default class FinalizeExitButton extends React.Component<
   public render() {
     const caption = `Finalize ${this.props.token.symbol} top exit`;
     return (
-      <Button onClick={this.finalize} disabled={this.disabled}>
+      <Button onClick={this.finalize} size="small" disabled={this.disabled}>
         {caption}
       </Button>
     );

src/components/tokenBalances.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import TokenValue from './tokenValue';
+import { tokensStore } from '../stores/tokens';
+
+type TokenBalancesProps = {
+  color: number;
+};
+
+const TokenBalances: React.FC<TokenBalancesProps> = ({ color }) => {
+  const token = tokensStore.tokenForColor(color);
+  if (!token) {
+    return null;
+  }
+
+  return (
+    <>
+      <span
+        style={{
+          position: 'relative',
+          marginRight: 10,
+          fontWeight: 'normal',
+          display: 'inline-flex',
+          flexDirection: 'column',
+        }}
+      >
+        <TokenValue value={token.balance} color={token.color} precision={3} />
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: 'normal',
+            opacity: 0.4,
+            marginTop: -5,
+          }}
+        >
+          Ethereum
+        </span>
+      </span>
+      <span
+        style={{
+          position: 'relative',
+          marginRight: 10,
+          fontWeight: 'normal',
+          display: 'inline-flex',
+          flexDirection: 'column',
+        }}
+      >
+        <TokenValue
+          value={token.plasmaBalance}
+          color={token.color}
+          precision={3}
+        />
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: 'normal',
+            opacity: 0.4,
+            marginTop: -5,
+          }}
+        >
+          Plasma
+        </span>
+      </span>
+    </>
+  );
+};
+
+export default TokenBalances;

src/components/tokenValue.tsx

@@ -7,12 +7,22 @@ import { tokensStore } from '../stores/tokens';
 interface TokenValueProps {
   value: BigIntType | BigIntType[];
   color: number;
+  precision?: number;
   tokenLink?: boolean;
 }
 
-const TokenValue: React.SFC<TokenValueProps> = ({
+const round = (n: number, precision?: number) => {
+  if (precision === undefined) {
+    return n;
+  }
+  const dec = 10 ** precision;
+  return Math.round(n * dec) / dec;
+};
+
+const TokenValue: React.FC<TokenValueProps> = ({
   value,
   color,
+  precision,
   tokenLink,
 }) => {
   const token = tokensStore.tokenForColor(color);
@@ -25,7 +35,7 @@ const TokenValue: React.SFC<TokenValueProps> = ({
     <React.Fragment>
       {token.isNft
         ? (value as BigIntType[]).length
-        : token.toTokens(value as BigIntType).toString()}{' '}
+        : round(token.toTokens(value as BigIntType), precision)}{' '}
       {!tokenLink && token.symbol}
       {tokenLink && (
         <Link to={`/explorer/address/${token.address}`}>{token.symbol}</Link>

src/components/transactionList.tsx

@@ -8,7 +8,12 @@ import { shortenHex, swapObject } from '../utils';
 
 const TYPES = swapObject(Type);
 
-const TransactionList = ({ txs }) => {
+type TransactionListProps = {
+  txs: any[];
+  loading?: boolean;
+};
+
+const TransactionList: React.FC<TransactionListProps> = ({ txs, loading }) => {
   const transactions = txs.map(tx => {
     return {
       key: tx.hash,
@@ -47,7 +52,8 @@ const TransactionList = ({ txs }) => {
         if (outputs && outputs.length) {
           return outputs.map((output, i) => (
             <div key={i}>
-              <TokenValue {...output} /> → <Link to={`/explorer/address/${output.address}`}>
+              <TokenValue {...output} /> →{' '}
+              <Link to={`/explorer/address/${output.address}`}>
                 {shortenHex(output.address)}
               </Link>
             </div>
@@ -70,7 +76,7 @@ const TransactionList = ({ txs }) => {
 
   return (
     <div className="leap-table">
-      <Table dataSource={transactions} columns={columns} />
+      <Table dataSource={transactions} columns={columns} loading={loading} />
     </div>
   );
 };

src/routes/explorer/address.tsx

@@ -13,6 +13,7 @@ import TransactionList from './txList';
 import { BigInt } from 'jsbi-utils';
 import { shortenHex } from '../../utils';
 import { tokensStore } from '../../stores/tokens';
+import ColorBadge from '../../components/colorBadge';
 
 interface AddressRouteProps {
   match: match<{
@@ -103,7 +104,10 @@ class Address extends React.Component<AddressRouteProps, any> {
             <h3>Token</h3>
             <dl className="info">
               <dt>Name</dt>
-              <dd>{this.account.token.name}</dd>
+              <dd>
+                {this.account.token.name}{' '}
+                <ColorBadge address={this.account.address} />
+              </dd>
               <dt>Symbol</dt>
               <dd>{this.account.token.symbol}</dd>
               <dt>Decimals</dt>

src/routes/explorer/index.tsx

@@ -37,10 +37,6 @@ export default class Explorer extends React.Component<ExplorerProps, any> {
   @observable
   private value = '';
 
-  private get leap() {
-    return tokensStore.tokenForColor(0);
-  }
-
   public render() {
     const { match: routerMatch } = this.props;
 
@@ -111,16 +107,6 @@ export default class Explorer extends React.Component<ExplorerProps, any> {
           <dd>
             <HexString>{exitHandlerStore.address}</HexString>
           </dd>
-          {this.leap && (
-            <Fragment>
-              <dt>Token contract address</dt>
-              <dd>
-                <Link to={`/explorer/address/${this.leap.address}`}>
-                  <HexString>{this.leap.address}</HexString>
-                </Link>
-              </dd>
-            </Fragment>
-          )}
         </dl>
       </AppLayout>
     );

src/routes/explorer/txList.tsx

@@ -5,25 +5,25 @@ import { Button } from 'antd';
 import { Tx } from 'leap-core';
 import TransactionListComponent from '../../components/transactionList';
 import { CONFIG } from '../../config';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
 
 type TransactionListProps = {
   from?: string;
   to?: string;
   color?: string;
 };
 
+@observer
 class TransactionList extends React.Component<TransactionListProps> {
-  public state: {
-    txs: any[];
-    nextToken?: string;
-  };
-  constructor(props: TransactionListProps) {
-    super(props);
-    this.state = {
-      txs: [],
-      nextToken: undefined,
-    };
-  }
+  @observable.shallow
+  private txs: any[] = [];
+
+  @observable
+  private nextToken?: string;
+
+  @observable
+  private loading = false;
 
   public componentDidMount() {
     this.fetchStuff(this.props);
@@ -47,6 +47,7 @@ class TransactionList extends React.Component<TransactionListProps> {
       return;
     }
 
+    this.loading = true;
     const qs = [
       from && `from=${from}`,
       to && `to=${to}`,
@@ -58,21 +59,22 @@ class TransactionList extends React.Component<TransactionListProps> {
     fetch(url)
       .then(r => r.json())
       .then(response => {
-        this.setState({
-          txs: response.transactions.map(tx => ({
-            ...tx,
-            ...Tx.fromRaw(tx.raw),
-          })),
-          nextToken: response.nextToken,
-        });
+        this.txs = response.transactions.map(tx => ({
+          ...tx,
+          ...Tx.fromRaw(tx.raw),
+        }));
+        this.nextToken = response.nextToken;
+      })
+      .finally(() => {
+        this.loading = false;
       });
   }
 
   public render() {
     return (
       <>
-        <TransactionListComponent txs={this.state.txs} />
-        {this.state.nextToken && <Button>Load more</Button>}
+        <TransactionListComponent txs={this.txs} loading={this.loading} />
+        {this.nextToken && <Button>Load more</Button>}
       </>
     );
   }

src/routes/registerToken.tsx

@@ -18,6 +18,7 @@ import AppLayout from '../components/appLayout';
 import { CONFIG } from '../config';
 import { TokenStore } from '../stores/token';
 import { tokensStore } from '../stores/tokens';
+import ColorBadge from '../components/colorBadge';
 
 const Item: React.FC<{ item: TokenStore }> = observer(({ item }) => (
   <List.Item key={item.address}>
@@ -32,6 +33,7 @@ const Item: React.FC<{ item: TokenStore }> = observer(({ item }) => (
               title="Non-fungible token"
             />
           )}
+          <ColorBadge address={item.address} />
         </Fragment>
       }
       description={
@@ -57,7 +59,7 @@ export default class RegisterToken extends React.Component<RegisterTokenProps> {
   public render() {
     return (
       <AppLayout section="registerToken">
-        <h1 style={{ marginBottom: 16, marginTop: 32 }}>Registered tokens:</h1>
+        <h1>Registered tokens</h1>
         <List
           itemLayout="vertical"
           size="small"