Invoice note

src/component/field.js

@@ -69,22 +69,24 @@ const namedStyles = StyleSheet.create({
     color: color.blackText,
     fontSize: font.sizeM,
     lineHeight: font.lineHeightM + 2 * 12,
-    marginRight: 10,
+    marginRight: 15,
   },
   text: {
     flex: 1,
     textAlign: 'right',
-    fontFamily: 'OpenSans Light',
     fontSize: font.sizeM,
     lineHeight: font.lineHeightM + 2 * 12,
     color: color.blackText,
+    opacity: 0.5,
   },
 });
 
 export const NamedField = ({ name, children, style }) => (
   <View style={[namedStyles.content, style]}>
     <Text style={namedStyles.name}>{name}</Text>
-    <Text style={namedStyles.text}>{children}</Text>
+    <Text style={namedStyles.text} numberOfLines={1}>
+      {children}
+    </Text>
   </View>
 );
 

src/view/pay-lightning-confirm.js

@@ -9,7 +9,7 @@ import { Header, Title } from '../component/header';
 import { CancelButton, BackButton, PillButton } from '../component/button';
 import Card from '../component/card';
 import Icon from '../component/icon';
-import { FormStretcher, FormText } from '../component/form';
+import { FormStretcher } from '../component/form';
 import {
   BalanceLabel,
   BalanceLabelNumeral,
@@ -34,6 +34,10 @@ const styles = StyleSheet.create({
   totalLbl: {
     marginTop: 5,
   },
+  note: {
+    marginTop: 5,
+    borderBottomWidth: 0,
+  },
   confirmBtn: {
     marginTop: 20,
   },
@@ -50,9 +54,6 @@ const PayLightningConfirmView = ({ store, nav, payment }) => (
     </Header>
     <MainContent>
       <Card>
-        <FormText style={styles.description}>
-          You are about to send a Bitcoin payment over the Lightning Network.
-        </FormText>
         <FormStretcher>
           <BalanceLabel style={styles.balance}>
             <BalanceLabelNumeral style={styles.numeral}>
@@ -68,6 +69,11 @@ const PayLightningConfirmView = ({ store, nav, payment }) => (
           <NamedField name="Total" style={styles.totalLbl}>
             {store.paymentTotalLabel} {store.unit}
           </NamedField>
+          {store.payment.note ? (
+            <NamedField name="Note" style={styles.note}>
+              {store.payment.note}
+            </NamedField>
+          ) : null}
         </FormStretcher>
         <PillButton
           style={styles.confirmBtn}

stories/screen.js

@@ -200,6 +200,7 @@ store.payments = [...Array(10)].map(() => ({
   status: 'complete',
   date: new Date(),
 }));
+store.payment.note = '#craefulgang';
 store.selectedTransaction = (store.computedTransactions || []).find(
   tx => tx.type === 'bitcoin'
 );