Merge pull request #99 from rsksmart/imstar15-update_dashboard_token_…

…style

Update dashboard token style. fix #51

src/assets/references.js

@@ -3,7 +3,12 @@ images.BTC = require('./images/icon/BTC.png');
 images.RBTC = require('./images/icon/RBTC.png');
 images.RIF = require('./images/icon/RIF.png');
 images.DOC = require('./images/icon/DOC.png');
+images.BTC_GREY = require('./images/icon/BTC.grey.png');
+images.RBTC_GREY = require('./images/icon/RBTC.grey.png');
+images.RIF_GREY = require('./images/icon/RIF.grey.png');
+images.DOC_GREY = require('./images/icon/DOC.grey.png');
 images.customToken = require('./images/icon/customToken.png');
+images.customToken_grey = require('./images/icon/customToken.grey.png');
 images.cornerButton = require('./images/misc/cornerButton.png');
 images.addWallet = require('./images/misc/addWallet.png');
 images.listHeader = require('./images/misc/listHeader.png');

src/common/common.js

@@ -280,12 +280,12 @@ const common = {
   },
 
   /**
-   * getSymbolFullName
-   * @param {string} symbol, BTC, RBTC, RIF
+   * getSymbolName
+   * @param {string} symbol, BTC, RBTC, RIF...
    * @param {string} type, MainTest or Testnet
    */
-  getSymbolFullName(symbol, type) {
-    return `${type === 'Testnet' ? 'Test' : ''} ${symbol}`;
+  getSymbolName(symbol, type) {
+    return `${type === 'Testnet' ? 't' : ''}${symbol}`;
   },
 
   getRandom(count) {

src/common/wallet/cointype.js

@@ -17,7 +17,7 @@ const coinType = {
     networkId: 137,
     icon: references.images.RBTC,
     queryKey: 'RBTC',
-    defaultName: 'SmartBitcoin',
+    defaultName: 'Smart Bitcoin',
     chain: 'Rootstock',
     type: 'Mainnet',
     symbol: 'RBTC',
@@ -26,7 +26,7 @@ const coinType = {
     networkId: 137,
     icon: references.images.RIF,
     queryKey: 'RIF',
-    defaultName: 'RIF',
+    defaultName: 'RSK Infra Framework',
     chain: 'Rootstock',
     type: 'Mainnet',
     symbol: 'RIF',
@@ -35,15 +35,15 @@ const coinType = {
     networkId: 137,
     icon: references.images.DOC,
     queryKey: 'DOC',
-    defaultName: 'DOC',
+    defaultName: 'Dollar on Chain',
     chain: 'Rootstock',
     type: 'Mainnet',
     symbol: 'DOC',
   },
   BTCTestnet: {
     networkId: 1,
     network: networks.testnet,
-    icon: references.images.BTC,
+    icon: references.images.BTC_GREY,
     queryKey: 'TBTC',
     defaultName: 'Bitcoin',
     chain: 'Bitcoin',
@@ -52,27 +52,27 @@ const coinType = {
   },
   RBTCTestnet: {
     networkId: 37310,
-    icon: references.images.RBTC,
+    icon: references.images.RBTC_GREY,
     queryKey: 'TRBTC',
-    defaultName: 'SmartBitcoin',
+    defaultName: 'Smart Bitcoin',
     chain: 'Rootstock',
     type: 'Testnet',
     symbol: 'RBTC',
   },
   RIFTestnet: {
     networkId: 37310,
-    icon: references.images.RIF,
+    icon: references.images.RIF_GREY,
     queryKey: 'TRIF',
-    defaultName: 'RIF',
+    defaultName: 'RSK Infra Framework',
     chain: 'Rootstock',
     type: 'Testnet',
     symbol: 'RIF',
   },
   DOCTestnet: {
     networkId: 37310,
-    icon: references.images.DOC,
+    icon: references.images.DOC_GREY,
     queryKey: 'DOC',
-    defaultName: 'DOC',
+    defaultName: 'Dollar on Chain',
     chain: 'Rootstock',
     type: 'Testnet',
     symbol: 'DOC',

src/common/wallet/rbtccoin.js

@@ -56,7 +56,7 @@ export default class RBTCCoin {
     if (!this.metadata) {
       const metadata = type === 'Mainnet' ? coinType.RBTC : coinType[`RBTC${type}`];
       this.metadata = _.clone(metadata);
-      this.metadata.icon = references.images.customToken;
+      this.metadata.icon = type === 'Mainnet' ? references.images.customToken : references.images.customToken_grey;
       this.metadata.defaultName = name;
     }
 

src/pages/mine/key.settings.js

@@ -93,7 +93,7 @@ class KeySettings extends Component {
     static createWalletListData(coins) {
       const listData = [];
       coins.forEach((coin) => {
-        const coinType = common.getSymbolFullName(coin.symbol, coin.type);
+        const coinType = common.getSymbolName(coin.symbol, coin.type);
         const item = { icon: coin.icon, title: coinType };
         listData.push(item);
       });

src/pages/wallet/add.custom.token.confirm.js

@@ -163,8 +163,12 @@ class AddCustomToken extends Component {
     render() {
       const { navigation } = this.props;
       const { isLoading, balance, isLoadingBalance } = this.state;
-      const { symbol, decimals } = this;
+      const { symbol, type, decimals } = this;
       const balanceText = balance ? common.getBalanceString(balance, decimals) : '-';
+
+      const symbolName = common.getSymbolName(symbol, type);
+      const icon = type === 'Mainnet' ? references.images.customToken : references.images.customToken_grey;
+
       return (
         <BasePageGereral
           isSafeView
@@ -180,8 +184,8 @@ class AddCustomToken extends Component {
             <View style={styles.tokenView}>
               <View style={styles.row}>
                 <Loc style={styles.rowTitle} text="page.wallet.addCustomTokenConfirm.token" />
-                <Image style={[styles.tokenLogo, space.marginRight_10]} source={references.images.customToken} />
-                <Text style={styles.symbol}>{symbol}</Text>
+                <Image style={[styles.tokenLogo, space.marginRight_10]} source={icon} />
+                <Text style={styles.symbol}>{symbolName}</Text>
               </View>
               <View style={styles.row}>
                 <Loc style={styles.rowTitle} text="page.wallet.addCustomTokenConfirm.decimals" />
@@ -190,7 +194,7 @@ class AddCustomToken extends Component {
               <View style={styles.row}>
                 <Loc style={styles.rowTitle} text="page.wallet.addCustomTokenConfirm.balance" />
                 { isLoadingBalance && (<ActivityIndicator size="small" animating={isLoadingBalance} />)}
-                { !isLoadingBalance && (<Text style={styles.rowText}>{`${balanceText} ${symbol}`}</Text>)}
+                { !isLoadingBalance && (<Text style={styles.rowText}>{`${balanceText} ${symbolName}`}</Text>)}
               </View>
             </View>
           </View>

src/pages/wallet/add.token.js

@@ -154,8 +154,7 @@ class AddToken extends Component {
     const createItem = (token, type) => {
       const coinId = type === 'Mainnet' ? token : token + type;
       const { icon } = coinType[coinId];
-      const name = common.getSymbolFullName(token, type);
-      // the properties of symbol, type are used by common.sortTokens
+      const name = common.getSymbolName(token, type);
       const item = {
         name, icon, selected: false, symbol: token, type, token: { symbol: token, type },
       };
@@ -171,8 +170,7 @@ class AddToken extends Component {
     _.each(coins, (coin) => {
       const foundToken = _.find(supportedTokens, (token) => coin.symbol === token);
       if (!foundToken) {
-        const name = common.getSymbolFullName(coin.symbol, coin.type);
-        // the properties of symbol, type are used by common.sortTokens
+        const name = common.getSymbolName(coin.symbol, coin.type);
         listData.push({
           name, icon: coin.icon, symbol: coin.symbol, type: coin.type, selected: true, token: coin,
         });

src/pages/wallet/dashboard/list.js

@@ -44,13 +44,13 @@ class WalletList extends Component {
       const wal = { name: wallet.name, coins: [] };
       // Create element for each Token (e.g. BTC, RBTC, RIF, DOC)
       wallet.coins.forEach((coin, index) => {
-        const coinType = common.getSymbolFullName(coin.symbol, coin.type);
+        const symbolName = common.getSymbolName(coin.symbol, coin.type);
         const amountText = coin.balance ? common.getBalanceString(coin.balance, coin.decimalPlaces) : '';
         const worthText = coin.balanceValue ? `${currencySymbol}${common.getAssetValueString(coin.balanceValue)}` : currencySymbol;
         const item = {
           key: `${index}`,
-          title: coin.defaultName,
-          text: coinType,
+          title: symbolName,
+          text: coin.defaultName,
           worth: worthText,
           amount: amountText,
           icon: coin.icon,

src/pages/wallet/history.js

@@ -270,7 +270,7 @@ class History extends Component {
   * @param {array} prices
   * @returns {object} { transactions, pendingBalance, pendingBalanceValue }
   */
-  static processRawTransactions(rawTransactions, address, symbol, decimalPlaces, currency, prices) {
+  static processRawTransactions(rawTransactions, address, symbol, type, decimalPlaces, currency, prices) {
     if (_.isEmpty(rawTransactions)) {
       return { transactions: [], pendingBalance: null, pendingBalanceValue: null };
     }
@@ -303,7 +303,7 @@ class History extends Component {
 
       if (transaction.value) {
         amount = common.convertUnitToCoinAmount(symbol, transaction.value);
-        amountText = `${common.getBalanceString(amount, decimalPlaces)} ${symbol}`;
+        amountText = `${common.getBalanceString(amount, decimalPlaces)} ${common.getSymbolName(symbol, type)}`;
       }
       transactions.push({
         state,
@@ -365,11 +365,12 @@ class History extends Component {
     return assetValueText;
   }
 
-  static getBalanceTexts(balance, balanceValue, pendingBalance, pendingBalanceValue, symbol, decimalPlaces, currency) {
+  static getBalanceTexts(balance, balanceValue, pendingBalance, pendingBalanceValue, symbol, type, decimalPlaces, currency) {
+    const symbolName = common.getSymbolName(symbol, type);
     const currencySymbol = getCurrencySymbol(currency);
-    const balanceText = `${History.getBalanceText(symbol, balance, decimalPlaces)} ${symbol}`;
+    const balanceText = `${History.getBalanceText(symbol, balance, decimalPlaces)} ${symbolName}`;
     const balanceValueText = `${currencySymbol}${History.getAssetValueText(balanceValue)}`;
-    const pendingBalanceText = pendingBalance && !pendingBalance.isEqualTo(0) ? `${History.getBalanceText(symbol, pendingBalance, decimalPlaces)} ${symbol}` : null;
+    const pendingBalanceText = pendingBalance && !pendingBalance.isEqualTo(0) ? `${History.getBalanceText(symbol, pendingBalance, decimalPlaces)} ${symbolName}` : null;
     const pendingBalanceValueText = pendingBalanceValue ? `${currencySymbol}${History.getAssetValueText(pendingBalanceValue)}` : null;
     return {
       balanceText, balanceValueText, pendingBalanceText, pendingBalanceValueText,
@@ -380,10 +381,10 @@ class History extends Component {
     const { currency, prices, navigation } = this.props;
     const { coin } = navigation.state.params;
     const {
-      balance, balanceValue, transactions, address, symbol, decimalPlaces,
+      balance, balanceValue, transactions, address, symbol, type, decimalPlaces,
     } = coin;
-    const { pendingBalance, pendingBalanceValue, transactions: listData } = History.processRawTransactions(transactions, address, symbol, decimalPlaces, currency, prices);
-    const balanceTexts = History.getBalanceTexts(balance, balanceValue, pendingBalance, pendingBalanceValue, symbol, decimalPlaces, currency, decimalPlaces);
+    const { pendingBalance, pendingBalanceValue, transactions: listData } = History.processRawTransactions(transactions, address, symbol, type, decimalPlaces, currency, prices);
+    const balanceTexts = History.getBalanceTexts(balance, balanceValue, pendingBalance, pendingBalanceValue, symbol, type, decimalPlaces, currency, decimalPlaces);
     this.setState({ listData, ...balanceTexts });
   }
 
@@ -395,10 +396,10 @@ class History extends Component {
     const { coin } = navigation.state.params;
     if ((updateTimestamp !== lastUpdateTimestamp || prices !== lastPrices || currency !== lastCurrency) && coin) {
       const {
-        balance, balanceValue, transactions, address, symbol, decimalPlaces,
+        balance, balanceValue, transactions, address, symbol, type, decimalPlaces,
       } = coin;
-      const { pendingBalance, pendingBalanceValue, transactions: listData } = History.processRawTransactions(transactions, address, symbol, decimalPlaces, currency, prices);
-      const balanceTexts = History.getBalanceTexts(balance, balanceValue, pendingBalance, pendingBalanceValue, symbol, decimalPlaces, currency);
+      const { pendingBalance, pendingBalanceValue, transactions: listData } = History.processRawTransactions(transactions, address, symbol, type, decimalPlaces, currency, prices);
+      const balanceTexts = History.getBalanceTexts(balance, balanceValue, pendingBalance, pendingBalanceValue, symbol, type, decimalPlaces, currency);
       this.setState({ listData, ...balanceTexts });
     }
   }
@@ -514,7 +515,7 @@ class History extends Component {
 
     const symbol = coin && coin.symbol;
     const type = coin && coin.type;
-    const symbolName = common.getSymbolFullName(symbol, type);
+    const symbolName = common.getSymbolName(symbol, type);
 
     return (
       <BasePageSimple headerComponent={<HistoryHeader title={symbolName} onBackButtonPress={() => navigation.goBack()} />}>

src/pages/wallet/receive.js

@@ -137,7 +137,7 @@ class WalletReceive extends Component {
       const address = coin && coin.address;
       const symbol = coin && coin.symbol;
       const type = coin && coin.type;
-      const symbolName = common.getSymbolFullName(symbol, type);
+      const symbolName = common.getSymbolName(symbol, type);
       const qrText = address;
       const title = `${strings('button.Receive')} ${symbolName}`;
 

src/pages/wallet/select.currency.js

@@ -15,6 +15,7 @@ import Header from '../../components/headers/header';
 import { createInfoNotification } from '../../common/notification.controller';
 import config from '../../../config';
 import coinType from '../../common/wallet/cointype';
+import common from '../../common/common';
 
 const styles = StyleSheet.create({
   sectionTitle: {
@@ -50,7 +51,7 @@ class WalletSelectCurrency extends Component {
         const item = { title: token, icon: coinType[token].icon };
         item.selected = true;
         this.mainnet.push(item);
-        const testnetItem = _.clone(item);
+        const testnetItem = { title: common.getSymbolName(token, 'Testnet'), icon: coinType[`${token}Testnet`].icon };
         testnetItem.selected = false;
         this.testnet.push(testnetItem);
       });

src/pages/wallet/select.wallet.js

@@ -49,7 +49,7 @@ export default class SelectWallet extends Component {
     const listData = [];
     // Create element for each Token (e.g. BTC, RBTC, RIF)
     _.each(wallet.coins, (coin) => {
-      const coinType = common.getSymbolFullName(coin.symbol, coin.type);
+      const coinType = common.getSymbolName(coin.symbol, coin.type);
       const item = {
         title: coin.defaultName,
         text: coinType,

src/pages/wallet/swap/swap.selection.js

@@ -261,7 +261,7 @@ class SwapSelection extends Component {
         if (filters && (filters.length === 0 || !filters.includes(coin.id.toLowerCase()))) {
           return;
         }
-        const coinType = common.getSymbolFullName(coin.id, coin.type);
+        const coinType = common.getSymbolName(coin.id, coin.type);
         const amountText = coin.balance ? common.getBalanceString(coin.balance, coin.decimalPlaces) : '';
         const item = {
           title: coinType,

src/pages/wallet/transaction.js

@@ -89,7 +89,7 @@ class Transaction extends Component {
     let amountText = null;
     if (!_.isNil(rawTransaction.value)) {
       const amount = common.convertUnitToCoinAmount(rawTransaction.symbol, rawTransaction.value);
-      amountText = `${common.getBalanceString(amount, transation.decimalPlaces)} ${rawTransaction.symbol}`;
+      amountText = `${common.getBalanceString(amount, transation.decimalPlaces)} ${common.getSymbolName(rawTransaction.symbol, rawTransaction.type)}`;
     }
     const datetimeText = transation.datetime ? transation.datetime.format('MMM Do YYYY HH:mm:ss A ZZ') : '';
     let confirmations = strings('page.wallet.transaction.Unconfirmed');

src/pages/wallet/transfer.js

@@ -234,9 +234,9 @@ class Transfer extends Component {
     gesturesEnabled: false,
   });
 
-  static generateAmountPlaceholderText(symbol, decimalPlaces, currency, prices) {
+  static generateAmountPlaceholderText(symbol, type, decimalPlaces, currency, prices) {
     const amountText = common.getBalanceString(PLACEHODLER_AMOUNT, decimalPlaces);
-    let amountPlaceholderText = `${amountText} ${symbol}`;
+    let amountPlaceholderText = `${amountText} ${common.getSymbolName(symbol, type)}`;
     if (!_.isEmpty(prices)) {
       const currencySymbol = common.getCurrencySymbol(currency);
       const amountValue = common.getCoinValue(PLACEHODLER_AMOUNT, symbol, currency, prices);
@@ -310,12 +310,12 @@ class Transfer extends Component {
   componentWillReceiveProps(nextProps) {
     const { prices, currency } = nextProps;
     const { prices: curPrices } = this.props;
-    const { symbol, decimalPlaces } = this.coin;
+    const { symbol, type, decimalPlaces } = this.coin;
 
     if (prices && prices !== curPrices) {
       const { customFee, feeSymbol } = this.state;
       const customFeeValue = common.getCoinValue(customFee, feeSymbol, currency, prices);
-      const amountPlaceholderText = Transfer.generateAmountPlaceholderText(symbol, decimalPlaces, currency, prices);
+      const amountPlaceholderText = Transfer.generateAmountPlaceholderText(symbol, type, decimalPlaces, currency, prices);
       this.setState({ customFeeValue, amountPlaceholderText });
     }
   }
@@ -657,11 +657,11 @@ class Transfer extends Component {
 
   initContext() {
     const { prices, currency } = this.props;
-    const { symbol, decimalPlaces } = this.coin;
+    const { symbol, type, decimalPlaces } = this.coin;
     console.log('prices: ', prices);
     console.log('currency: ', currency);
     const feeSymbol = symbol === 'BTC' ? 'BTC' : 'RBTC';
-    const amountPlaceholderText = Transfer.generateAmountPlaceholderText(symbol, decimalPlaces, currency, prices);
+    const amountPlaceholderText = Transfer.generateAmountPlaceholderText(symbol, type, decimalPlaces, currency, prices);
     this.setState({ feeSymbol, amountPlaceholderText });
   }
 
@@ -798,6 +798,7 @@ class Transfer extends Component {
     const {
       customFee, feeSymbol, customFeeValue, feeSliderValue,
     } = this.state;
+    const { type } = this.coin;
     const { currency } = this.props;
     const currencySymbol = common.getCurrencySymbol(currency);
     return (
@@ -816,7 +817,7 @@ class Transfer extends Component {
               onSlidingComplete={(value) => this.onCustomFeeSlidingComplete(value)}
             />
             <Text style={styles.customFeeText}>
-              {`${common.getBalanceString(customFee, config.symbolDecimalPlaces[feeSymbol])} ${feeSymbol}`}
+              {`${common.getBalanceString(customFee, config.symbolDecimalPlaces[feeSymbol])} ${common.getSymbolName(feeSymbol, type)}`}
               {customFeeValue && ` = ${currencySymbol}${common.getAssetValueString(customFeeValue)}`}
             </Text>
           </View>
@@ -831,15 +832,16 @@ class Transfer extends Component {
     const {
       feeSymbol, feeLevel, isCustomFee, levelFees,
     } = this.state;
+    const { type } = this.coin;
     const currencySymbol = common.getCurrencySymbol(currency);
     const items = [];
     for (let i = 0; i < NUM_OF_FEE_LEVELS; i += 1) {
-      let item = { coin: `0 ${feeSymbol}`, value: `${currencySymbol}0` };
+      let item = { coin: `0 ${common.getSymbolName(feeSymbol, type)}`, value: `${currencySymbol}0` };
       if (levelFees) {
         const { fee, value } = levelFees[i];
         const amountText = common.getBalanceString(fee, config.symbolDecimalPlaces[feeSymbol]);
         const valueText = value ? `${currencySymbol}${common.getAssetValueString(value)}` : '';
-        item = { coin: `${amountText} ${feeSymbol}`, value: valueText };
+        item = { coin: `${amountText} ${common.getSymbolName(feeSymbol, type)}`, value: valueText };
       }
       items.push(item);
     }
@@ -883,7 +885,7 @@ class Transfer extends Component {
     const { coin } = this;
     const symbol = coin && coin.symbol;
     const type = coin && coin.type;
-    const symbolName = common.getSymbolFullName(symbol, type);
+    const symbolName = common.getSymbolName(symbol, type);
     const title = `${strings('button.Send')} ${symbolName}`;
     let balanceText = '-';
     let balanceValueText = '-';