added link component with some tweaks to transaction list (#98)

app/src/component/button/view.js

@@ -3,7 +3,7 @@ import { Text, TouchableOpacity } from 'react-native';
 import buttonStyle from '../../styles/button';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
-export default class Button extends React.PureComponent<Props> {
+export default class Button extends React.PureComponent {
   render() {
     const {
       disabled,

app/src/component/link/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
+import Link from './view';
+
+const perform = dispatch => ({
+  notify: (data) => dispatch(doNotify(data))
+});
+
+export default connect(null, perform)(Link);

app/src/component/link/view.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Linking, Text, TouchableOpacity } from 'react-native';
+
+export default class Link extends React.PureComponent {
+  handlePress = () => {
+    const { error, href, navigation, notify } = this.props;
+    
+    if (navigation && href.startsWith('#')) {
+      navigation.navigate(href.substring(1));
+    } else {
+      Linking.openURL(href).catch(err => notify({
+        message: error,
+        displayType: ['toast']
+      }));
+    }
+  }
+  
+  render() {
+    const {
+      onPress,
+      style,
+      text
+    } = this.props;
+    
+    let styles = [];
+    if (style.length) {
+      styles = styles.concat(style);
+    } else {
+      styles.push(style);
+    }
+    
+    return (
+      <TouchableOpacity onPress={onPress ? onPress : this.handlePress}>
+        <Text style={styles}>{text}</Text>
+      </TouchableOpacity>
+    );
+  }
+};

app/src/component/transactionList/index.js

@@ -8,6 +8,4 @@ const select = state => ({
   myClaims: selectAllMyClaimsByOutpoint(state),
 });
 
-const perform = dispatch => ({});
-
-export default connect(select, perform)(TransactionList);
+export default connect(select, null)(TransactionList);

app/src/component/transactionList/internal/transaction-list-item.js

@@ -1,7 +1,8 @@
 // @flow
 import React from 'react';
-import { Text, View } from 'react-native';
-import { formatCredits } from 'lbry-redux';
+import { Text, View, Linking } from 'react-native';
+import { buildURI, formatCredits } from 'lbry-redux';
+import Link from '../../link';
 import moment from 'moment';
 import transactionListStyle from '../../../styles/transactionList';
 
@@ -11,14 +12,20 @@ class TransactionListItem extends React.PureComponent {
   }
   
   render() {
-    const { transaction } = this.props;
+    const { transaction, navigation } = this.props;
     const { amount, claim_id: claimId, claim_name: name, date, fee, txid, type } = transaction;
-    
+            
     return (
       <View style={transactionListStyle.listItem}>
         <View style={[transactionListStyle.row, transactionListStyle.topRow]}>
           <View style={transactionListStyle.col}>
             <Text style={transactionListStyle.text}>{this.capitalize(type)}</Text>
+            {name && claimId && (
+              <Link
+                style={transactionListStyle.link}
+                onPress={() => navigation && navigation.navigate('File', { uri: buildURI({ claimName: name, claimId }) })}
+                text={name} />
+            )}      
           </View>
           <View style={transactionListStyle.col}>
             <Text style={[transactionListStyle.amount, transactionListStyle.text]}>{formatCredits(amount, 8)}</Text>
@@ -27,7 +34,10 @@ class TransactionListItem extends React.PureComponent {
         </View>
         <View style={transactionListStyle.row}>
           <View style={transactionListStyle.col}>
-            <Text style={[transactionListStyle.smallText, transactionListStyle.txid]}>{txid.substring(0, 8)}</Text>
+            <Link style={transactionListStyle.smallLink}
+                  text={txid.substring(0, 8)}
+                  href={`https://explorer.lbry.io/tx/${txid}`}
+                  error={'The transaction URL could not be opened'} />
           </View>
           <View style={transactionListStyle.col}>
             {date ? (

app/src/component/transactionList/view.js

@@ -40,7 +40,7 @@ class TransactionList extends React.PureComponent {
   }
   
   render() {
-    const { emptyMessage, rewards, transactions } = this.props;
+    const { emptyMessage, rewards, transactions, navigation } = this.props;
     const { filter } = this.state;
     const transactionList = transactions.filter(this.filterTransaction);
     
@@ -56,6 +56,7 @@ class TransactionList extends React.PureComponent {
               <TransactionListItem
                 key={`${t.txid}:${t.nout}`}
                 transaction={t}
+                navigation={navigation}
                 reward={rewards && rewards[t.txid]}
               />
             ))}

app/src/component/transactionListRecent/view.js

@@ -3,6 +3,7 @@ import React from 'react';
 //import BusyIndicator from 'component/common/busy-indicator';
 import { Text, View } from 'react-native';
 import Button from '../button';
+import Link from '../link';
 import TransactionList from '../transactionList';
 import type { Transaction } from '../transactionList/view';
 import walletStyle from '../../styles/wallet';
@@ -26,14 +27,17 @@ class TransactionListRecent extends React.PureComponent<Props> {
       <View style={walletStyle.transactionsCard}>
         <View style={[walletStyle.row, walletStyle.transactionsHeader]}>
           <Text style={walletStyle.transactionsTitle}>Recent Transactions</Text>
-          <Button style={walletStyle.button} text={'View All'}
-            onPress={() => navigation.navigate('TransactionHistory')} />
+          <Link style={walletStyle.link}
+                navigation={navigation}
+                text={'View All'}
+                href={'#TransactionHistory'} />
         </View>
         {fetchingTransactions && (
           <Text style={walletStyle.infoText}>Fetching transactions...</Text>  
         )}
         {!fetchingTransactions && (
           <TransactionList
+            navigation={navigation}
             transactions={transactions}
             emptyMessage={"Looks like you don't have any recent transactions."}
           />

app/src/page/transactionHistory/view.js

@@ -9,7 +9,7 @@ class TransactionHistoryPage extends React.PureComponent {
   }
 
   render() {
-    const { fetchingTransactions, transactions } = this.props;
+    const { fetchingTransactions, transactions, navigation } = this.props;
 
     return (
       <ScrollView>
@@ -18,7 +18,7 @@ class TransactionHistoryPage extends React.PureComponent {
             <Text style={walletStyle.infoText}>Loading transactions...</Text>
           )}
           {transactions && transactions.length && (
-            <TransactionList transactions={transactions} />
+            <TransactionList navigation={navigation} transactions={transactions} />
           )}
         </View>
       </ScrollView>

app/src/styles/transactionList.js

@@ -24,17 +24,24 @@ const transactionListStyle = StyleSheet.create({
     fontFamily: 'Metropolis-Regular',
     fontSize: 14
   },
+  link: {
+    color: Colors.LbryGreen,
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 14
+  },
   amount: {
     textAlign: 'right'
   },
-  txid: {
-    color: Colors.LbryGreen
-  },
   smallText: {
     fontFamily: 'Metropolis-Regular',
     fontSize: 12,
     color: '#aaaaaa'
   },
+  smallLink: {
+    color: Colors.LbryGreen,
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 12
+  },
   noTransactions: {
     fontFamily: 'Metropolis-Regular',
     textAlign: 'center',

app/src/styles/wallet.js

@@ -57,6 +57,11 @@ const walletStyle = StyleSheet.create({
     fontFamily: 'Metropolis-Regular',
     fontSize: 14
   },
+  link: {
+    color: Colors.LbryGreen,
+    fontFamily: 'Metropolis-Regular',
+    fontSize: 14
+  },
   smallText: {
     fontFamily: 'Metropolis-Regular',
     fontSize: 12