On-chain transaction details

hsjoberg · Aug 7, 2019 · 6e1aa2b · 6e1aa2b
1 parent 77cb50f
commit 6e1aa2b
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 8 deletions.
diff --git a/src/Main.tsx b/src/Main.tsx
@@ -21,6 +21,7 @@ import InitLightning from "./InitLightning";
 import BlurOverlay, { closeOverlay, openOverlay } from "./Blur";
 // import BlurOverlay, { closeOverlay, openOverlay } from "react-native-blur-overlay";
 import TransactionDetails from "./windows/TransactionDetails";
+import OnChainTransactionDetails from "./windows/OnChain/OnChainTransactionDetails";
 
 const MainStack = createBottomTabNavigator({
   Overview,
@@ -36,6 +37,9 @@ const StackNavigator = createStackNavigator({
   TransactionDetails : {
     screen: TransactionDetails,
   },
+  OnChainTransactionDetails: {
+    screen: OnChainTransactionDetails,
+  },
   Receive,
   Send,
   Settings,

diff --git a/src/components/OnChainTransactionItem.tsx b/src/components/OnChainTransactionItem.tsx
@@ -9,19 +9,20 @@ import { formatISO } from "../utils";
 
 export interface IOnChainTransactionItemProps {
   transaction: IBlixtTransaction;
+  onPress: (id: string) => void;
 }
-export const OnChainTransactionItem = ({ transaction }: IOnChainTransactionItemProps) => {
+export const OnChainTransactionItem = ({ transaction, onPress }: IOnChainTransactionItemProps) => {
   let icon;
   let text;
   if (transaction.amount === undefined) {
     icon = (<Icon type="MaterialIcons" name="error-outline" style={{color: blixtTheme.red }} />);
     text = (<Text>Error</Text>);
   }
-  else if (transaction.type === "NORMAL" && transaction.amount!.gte(0)) {
+  else if (transaction.type === "NORMAL" && transaction.amount!.isPositive()) {
     icon = (<Icon type="AntDesign" name="plus" style={{color: blixtTheme.green }} />);
     text = (<Text style={{ fontSize: 13 }} note={true}>Received Bitcoin</Text>);
   }
-  else if (transaction.type === "NORMAL" && transaction.amount!.lt(0)) {
+  else if (transaction.type === "NORMAL" && transaction.amount!.isNegative()) {
     icon = (<Icon type="AntDesign" name="minus" style={{color: blixtTheme.red }} />);
     text = (
       <Text style={{ fontSize: 12.5 }} note={true}>
@@ -39,11 +40,11 @@ export const OnChainTransactionItem = ({ transaction }: IOnChainTransactionItemP
   }
 
   return (
-    <ListItem>
+    <ListItem onPress={() => onPress(transaction.txHash!)}>
       {icon}
       <Body>
         <View style={{ flexDirection: "row" }}>
-          <Text>{formatISO(fromUnixTime(transaction.timeStamp!.toInt()))}</Text>
+          <Text>{formatISO(fromUnixTime(transaction.timeStamp!.toNumber()))}</Text>
           <Right>
             {transaction.amount && <Text>{transaction.amount.toString()} Satoshi</Text>}
           </Right>

diff --git a/src/state/OnChain.ts b/src/state/OnChain.ts
@@ -33,11 +33,14 @@ export interface IOnChainModel {
   setAddress: Action<IOnChainModel, lnrpc.NewAddressResponse>;
   setTransactions: Action<IOnChainModel, ISetTransactionsPayload>;
 
+
   balance: Long;
   unconfirmedBalance: Long;
   totalBalance: Computed<IOnChainModel, Long>;
   address?: string;
-  transactions: lnrpc.ITransaction[];
+  transactions: IBlixtTransaction[];
+
+  getOnChainTransactionByTxId: Computed<IOnChainModel, (txId: string) => lnrpc.ITransaction | undefined>;
 }
 
 export const onChain: IOnChainModel = {
@@ -95,4 +98,14 @@ export const onChain: IOnChainModel = {
   unconfirmedBalance: Long.fromInt(0),
   totalBalance: computed((state) => state.balance.add(state.unconfirmedBalance)),
   transactions: [],
+
+  getOnChainTransactionByTxId: computed(
+    (state) => {
+      return (txId: string) => {
+        return state.transactions.find((tx) => {
+          return txId === tx.txHash;
+        });
+      };
+    },
+  ),
 };
diff --git a/src/windows/OnChain/OnChainTransactionDetails.tsx b/src/windows/OnChain/OnChainTransactionDetails.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { StyleSheet, Clipboard } from "react-native";
+import { Body, Card, Text, CardItem, H1, Toast } from "native-base";
+import { NavigationScreenProp } from "react-navigation";
+import { fromUnixTime } from "date-fns";
+
+import Blurmodal from "../../components/BlurModal";
+import { formatISO } from "../../utils";
+import { useStoreState } from "../../state/store";
+
+interface IMetaDataProps {
+  title: string;
+  data: string;
+}
+const MetaData = ({ title, data }: IMetaDataProps) => {
+  return (
+    <Text
+      style={style.detailText}
+      onPress={() => {
+        Clipboard.setString(data);
+        Toast.show({ text: "Copied to clipboard.", type: "warning" });
+      }}
+    >
+      <Text style={{ fontWeight: "bold" }}>{title}:{"\n"}</Text>
+      {data}
+    </Text>
+  );
+};
+
+export interface ITransactionDetailsProps {
+  navigation: NavigationScreenProp<{}>;
+}
+export default ({ navigation }: ITransactionDetailsProps) => {
+  const txId: string = navigation.getParam("txId");
+  const transaction = useStoreState((store) => store.onChain.getOnChainTransactionByTxId(txId));
+
+  if (!transaction) {
+    return (<></>);
+  }
+
+  return (
+    <Blurmodal navigation={navigation}>
+      <Card style={style.card}>
+        <CardItem>
+          <Body>
+            <H1 style={style.header}>Transaction</H1>
+            <MetaData title="Id" data={transaction.txHash!} />
+            <MetaData title="Date" data={formatISO(fromUnixTime(transaction.timeStamp!.toNumber()))} />
+            {transaction.amount && <MetaData title="Amount" data={transaction.amount!.toString() + " Satoshi"} />}
+            {transaction.totalFees && <MetaData title="Fees" data={transaction.totalFees.toString() + " Satoshi"} />}
+            <MetaData title="Destination" data={transaction.destAddresses![transaction!.destAddresses!.length - 1]} />
+            <MetaData title="Confirmations" data={(transaction.numConfirmations && transaction.numConfirmations.toString()) || "Unknown"} />
+            <MetaData title="Block height" data={(transaction.blockHeight && transaction.blockHeight!.toString()) || "Unknown"} />
+            <MetaData title="Block hash" data={(transaction.blockHash && transaction.blockHash.toString()) || "Unknown"} />
+          </Body>
+        </CardItem>
+      </Card>
+    </Blurmodal>
+  );
+};
+
+const style = StyleSheet.create({
+  card: {
+    padding: 5,
+    width: "100%",
+    minHeight: "55%",
+  },
+  header: {
+    width: "100%",
+    fontWeight: "bold",
+    marginBottom: 8,
+  },
+  detailText: {
+    marginBottom: 7,
+  },
+});
diff --git a/src/windows/OnChain/OnChainTransactionLog.tsx b/src/windows/OnChain/OnChainTransactionLog.tsx
@@ -19,6 +19,10 @@ export const OnChainTransactionLog = ({ navigation }: IOnChainTransactionLogProp
     })();
   }, [getTransactions]);
 
+  const onTransactionPress = (txId: string) => {
+    navigation.navigate("OnChainTransactionDetails", { txId });
+  }
+
   return (
     <Container>
       <Header iosBarStyle="light-content" translucent={false}>
@@ -39,8 +43,14 @@ export const OnChainTransactionLog = ({ navigation }: IOnChainTransactionLogProp
       <Content>
         <FlatList
           style={{ padding: 12 }}
-          data={transactions.sort((tx1, tx2) => tx2.timeStamp - tx1.timeStamp)}
-          renderItem={({ item: transaction }) => <OnChainTransactionItem key={transaction.txHash!} transaction={transaction} />}
+          data={transactions.sort((tx1, tx2) => tx2.timeStamp!.toNumber() - tx1.timeStamp!.toNumber())}
+          renderItem={({ item: transaction }) => (
+            <OnChainTransactionItem
+              key={transaction.txHash!}
+              transaction={transaction}
+              onPress={onTransactionPress}
+            />
+          )}
           keyExtractor={(transaction, i) => transaction.txHash! + i}
         />
       </Content>