Merge pull request #593 from ZeusLN/master

[Releases] v0.6.0-alpha3
ZeusLN · Sep 30, 2021 · 16c244b · 16c244b
2 parents 1a3c9bd + 78521ea
commit 16c244b
Show file tree

Hide file tree

Showing 69 changed files with 4,057 additions and 867 deletions.
diff --git a/Navigation.ts b/Navigation.ts
@@ -47,6 +47,8 @@ import ImportAccountQRScanner from './views/Accounts/ImportAccountQRScanner';
 
 import Onboarding from './views/Onboarding';
 
+import EditFee from './views/EditFee';
+
 const AppScenes = {
     Lockscreen: {
         screen: Lockscreen
@@ -63,6 +65,9 @@ const AppScenes = {
     NodeQRCodeScanner: {
         screen: NodeQRScanner
     },
+    EditFee: {
+        screen: EditFee
+    },
     Settings: {
         screen: Settings
     },

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -131,8 +131,8 @@ android {
         applicationId "app.zeusln.zeus"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 27
-        versionName "0.6.0-alpha2"
+        versionCode 28
+        versionName "0.6.0-alpha3"
         multiDexEnabled true
         missingDimensionStrategy 'react-native-camera', 'general'
     }

diff --git a/backends/LND.ts b/backends/LND.ts
@@ -245,7 +245,11 @@ export default class LND {
     getNodeInfo = (urlParams?: Array<string>) =>
         this.getRequest(`/v1/graph/node/${urlParams && urlParams[0]}`);
     getFees = () => this.getRequest('/v1/fees');
-    setFees = (data: any) => this.postRequest('/v1/chanpolicy', data);
+    setFees = (data: any) => {
+        const request = { ...data };
+        request.fee_rate = `${Number(data.fee_rate) / 100}`;
+        return this.postRequest('/v1/chanpolicy', data);
+    };
     getRoutes = (urlParams?: Array<string>) =>
         this.getRequest(
             `/v1/graph/routes/${urlParams && urlParams[0]}/${urlParams &&

diff --git a/components/Amount.tsx b/components/Amount.tsx
@@ -6,6 +6,8 @@ import { Spacer } from './layout/Spacer';
 import { inject, observer } from 'mobx-react';
 import UnitsStore from '../stores/UnitsStore';
 import PrivacyUtils from '../utils/PrivacyUtils';
+import ClockIcon from '../images/SVG/Clock.svg';
+import { themeColor } from '../utils/ThemeUtils';
 
 export const satoshisPerBTC = 100000000;
 
@@ -20,8 +22,8 @@ interface AmountDisplayProps {
     rtl?: boolean;
     space?: boolean;
     jumboText?: boolean;
-    credit?: boolean;
-    debit?: boolean;
+    color?: 'text' | 'success' | 'warning' | 'highlight' | 'secondaryText';
+    pending?: boolean;
 }
 
 function AmountDisplay({
@@ -33,30 +35,54 @@ function AmountDisplay({
     rtl = false,
     space = false,
     jumboText = false,
-    credit = false,
-    debit = false
+    color = undefined,
+    pending = false
 }: AmountDisplayProps) {
     if (unit === 'fiat' && !symbol) {
         console.error('Must include a symbol when rendering fiat');
     }
 
     const actualSymbol = unit === 'btc' ? '₿' : symbol;
 
+    const Pending = () => (
+        <View
+            style={{
+                paddingBottom: jumboText ? 8 : 2,
+                paddingHorizontal: jumboText ? 0 : 1
+            }}
+        >
+            <ClockIcon
+                color={themeColor('bitcoin')}
+                width={jumboText ? 30 : 15}
+                height={jumboText ? 30 : 15}
+            />
+        </View>
+    );
+
+    const FiatSymbol = () => (
+        <Body secondary jumbo={jumboText} color={color}>
+            {actualSymbol}
+        </Body>
+    );
+
+    const TextSpace = () => (
+        <Body jumbo={jumboText} color={color}>
+            {' '}
+        </Body>
+    );
+
+    // TODO this could probably be made more readable by componentizing the repeat bits
     switch (unit) {
         case 'sats':
             return (
                 <Row align="flex-end">
-                    <Body jumbo={jumboText} credit={credit} debit={debit}>
+                    {pending ? <Pending /> : null}
+                    <Body jumbo={jumboText} color={color}>
                         {amount}
                     </Body>
                     <Spacer width={2} />
                     <View style={{ paddingBottom: jumboText ? 8 : 1.5 }}>
-                        <Body
-                            secondary
-                            small={!jumboText}
-                            credit={credit}
-                            debit={debit}
-                        >
+                        <Body secondary small={!jumboText} color={color}>
                             {plural ? 'sats' : 'sat'}
                         </Body>
                     </View>
@@ -67,54 +93,22 @@ function AmountDisplay({
             if (rtl) {
                 return (
                     <Row align="flex-end">
-                        <Body jumbo={jumboText} credit={credit} debit={debit}>
+                        <Body jumbo={jumboText} color={color}>
                             {negative ? '-' : ''}
                             {amount}
                         </Body>
-                        {space ? (
-                            <Body
-                                jumbo={jumboText}
-                                credit={credit}
-                                debit={debit}
-                            >
-                                {' '}
-                            </Body>
-                        ) : (
-                            <Spacer width={1} />
-                        )}
-                        <Body
-                            secondary
-                            jumbo={jumboText}
-                            credit={credit}
-                            debit={debit}
-                        >
-                            {actualSymbol}
-                        </Body>
+                        {space ? <TextSpace /> : <Spacer width={1} />}
+                        <FiatSymbol />
+                        {pending ? <Pending /> : null}
                     </Row>
                 );
             } else {
                 return (
                     <Row align="flex-end">
-                        <Body
-                            secondary
-                            jumbo={jumboText}
-                            credit={credit}
-                            debit={debit}
-                        >
-                            {actualSymbol}
-                        </Body>
-                        {space ? (
-                            <Body
-                                jumbo={jumboText}
-                                credit={credit}
-                                debit={debit}
-                            >
-                                {' '}
-                            </Body>
-                        ) : (
-                            <Spacer width={1} />
-                        )}
-                        <Body jumbo={jumboText} credit={credit} debit={debit}>
+                        {pending ? <Pending /> : null}
+                        <FiatSymbol />
+                        {space ? <TextSpace /> : <Spacer width={1} />}
+                        <Body jumbo={jumboText} color={color}>
                             {negative ? '-' : ''}
                             {amount.toString()}
                         </Body>
@@ -133,7 +127,10 @@ interface AmountProps {
     jumboText?: boolean;
     credit?: boolean;
     debit?: boolean;
+    // If credit or debit doesn't cover the use case
+    color?: 'text' | 'success' | 'warning' | 'highlight' | 'secondaryText';
     toggleable?: boolean;
+    pending?: boolean;
 }
 
 @inject('UnitsStore')
@@ -148,7 +145,9 @@ export class Amount extends React.Component<AmountProps, {}> {
             jumboText = false,
             credit = false,
             debit = false,
-            toggleable = false
+            toggleable = false,
+            color = undefined,
+            pending = false
         } = this.props;
         const UnitsStore = this.props.UnitsStore!;
 
@@ -157,6 +156,14 @@ export class Amount extends React.Component<AmountProps, {}> {
 
         let unformattedAmount = UnitsStore.getUnformattedAmount(value, units);
 
+        const textColor = debit
+            ? 'warning'
+            : credit
+            ? 'success'
+            : color
+            ? color
+            : undefined;
+
         if (sensitive) {
             let amount = unformattedAmount.amount;
 
@@ -174,20 +181,24 @@ export class Amount extends React.Component<AmountProps, {}> {
                 <TouchableOpacity onPress={() => UnitsStore.changeUnits()}>
                     <AmountDisplay
                         {...unformattedAmount}
+                        negative={false}
                         jumboText={jumboText}
-                        credit={credit}
-                        debit={debit}
+                        color={textColor}
+                        pending={pending}
                     />
                 </TouchableOpacity>
             );
         }
 
+        // TODO negative is hardcoded to false because we're inconsistent
+        // an on-chain debit is a negative number, but a lightning debit isn't
         return (
             <AmountDisplay
                 {...unformattedAmount}
+                negative={false}
                 jumboText={jumboText}
-                credit={credit}
-                debit={debit}
+                color={textColor}
+                pending={pending}
             />
         );
     }

diff --git a/components/Channels/ChannelsHeader.tsx b/components/Channels/ChannelsHeader.tsx
@@ -119,7 +119,13 @@ function TotalRow({
 export function ChannelsHeader(props) {
     const { totalInbound, totalOutbound, totalOffline } = props;
     return (
-        <View style={styles.wrapper}>
+        <View
+            style={{
+                ...styles.wrapper,
+                backgroundColor: themeColor('background'),
+                color: themeColor('text')
+            }}
+        >
             <View style={styles.donut}>
                 <Donut
                     totalInbound={totalInbound}
@@ -166,10 +172,8 @@ const styles = StyleSheet.create({
         paddingBottom: 16,
         paddingLeft: 16,
         paddingRight: 16,
-        backgroundColor: themeColor('background'),
         borderBottomLeftRadius: 20,
         borderBottomRightRadius: 20,
-        color: themeColor('text'),
         // TODO: this shadow stuff probably needs tweaking on iOS
         shadowColor: '#000',
         shadowOffset: {

diff --git a/components/CollapsedQR.tsx b/components/CollapsedQR.tsx
@@ -46,7 +46,16 @@ export default class CollapsedQR extends React.Component<
 
         return (
             <React.Fragment>
-                {!hideText && <Text style={styles.value}>{value}</Text>}
+                {!hideText && (
+                    <Text
+                        style={{
+                            ...styles.value,
+                            color: themeColor('secondaryText')
+                        }}
+                    >
+                        {value}
+                    </Text>
+                )}
                 {!collapsed && (
                     <View style={styles.qrPadding}>
                         <QRCode value={value} size={350} logo={secondaryLogo} />
@@ -85,7 +94,6 @@ export default class CollapsedQR extends React.Component<
 const styles = StyleSheet.create({
     value: {
         marginBottom: 15,
-        color: themeColor('secondaryText'),
         paddingLeft: 20
     },
     qrPadding: {

diff --git a/components/FeeBreakdown.tsx b/components/FeeBreakdown.tsx
@@ -100,7 +100,7 @@ export default class FeeBreakdown extends React.Component<
                                 value={`${Number(
                                     chanInfo[channelId].node1_policy
                                         .fee_rate_milli_msat
-                                ) / 1000}%`}
+                                ) / 10000}%`}
                                 sensitive
                             />
                             <KeyValue
@@ -157,7 +157,7 @@ export default class FeeBreakdown extends React.Component<
                                     feeRate={`${Number(
                                         chanInfo[channelId].node1_policy
                                             .fee_rate_milli_msat
-                                    ) / 1000}`}
+                                    ) / 10000}`}
                                     timeLockDelta={chanInfo[
                                         channelId
                                     ].node1_policy.time_lock_delta.toString()}
@@ -215,7 +215,7 @@ export default class FeeBreakdown extends React.Component<
                                 value={`${Number(
                                     chanInfo[channelId].node2_policy
                                         .fee_rate_milli_msat
-                                ) / 1000}%`}
+                                ) / 10000}%`}
                                 sensitive
                             />
                             <KeyValue
@@ -272,7 +272,7 @@ export default class FeeBreakdown extends React.Component<
                                     feeRate={`${Number(
                                         chanInfo[channelId].node2_policy
                                             .fee_rate_milli_msat
-                                    ) / 1000}`}
+                                    ) / 10000}`}
                                     timeLockDelta={chanInfo[
                                         channelId
                                     ].node2_policy.time_lock_delta.toString()}

diff --git a/components/HopPicker.tsx b/components/HopPicker.tsx
@@ -131,7 +131,12 @@ export default class ChannelPicker extends React.Component<
                     visible={showChannelModal}
                 >
                     <View style={styles.centeredView}>
-                        <View style={styles.modal}>
+                        <View
+                            style={{
+                                ...styles.modal,
+                                backgroundColor: themeColor('background')
+                            }}
+                        >
                             {showChannelModal && (
                                 <>
                                     <Text
@@ -373,7 +378,10 @@ export default class ChannelPicker extends React.Component<
                                         this.openPicker();
                                     }
                                 }}
-                                style={styles.picker}
+                                style={{
+                                    height: 50,
+                                    color: themeColor('text')
+                                }}
                             >
                                 {pickerValuesAndroid}
                             </Picker>
@@ -428,18 +436,12 @@ const styles = StyleSheet.create({
         paddingTop: 10,
         marginLeft: Platform.OS === 'ios' ? 0 : -8
     },
-    picker: {
-        height: 50,
-        color: themeColor('text')
-    },
     button: {
         paddingTop: 10,
         paddingBottom: 10
     },
     modal: {
         margin: 20,
-        color: themeColor('text'),
-        backgroundColor: themeColor('background'),
         borderRadius: 20,
         padding: 35,
         shadowColor: '#000',