Merge branch 'master' into component-amount-input

ZeusLN · Apr 8, 2023 · 610ec6c · 610ec6c
2 parents 46a0ff8 + 8b1d6e5
commit 610ec6c
Show file tree

Hide file tree

Showing 74 changed files with 1,000 additions and 1,436 deletions.
diff --git a/README.md b/README.md
@@ -123,6 +123,16 @@ Zeus is proud to be integrated on the following platforms:
 3. `cd ios && pod install`
 4. open `ios/zeus.xcworkspace` in Xcode and hit Run.
 
+## Contributing
+
+Please be sure to run `yarn run tsc` to check for type errors, `yarn run test` to run all tests, and `yarn run prettier` to run the prettier
+
+If you are making cosmetic changes please test on both Android and iOS as things don't render exactly the same on both platforms.
+
+If you're looking for a quick way to get a lightning development environment running, check out [Polar](https://github.com/jamaljsr/polar).
+
+NOTE: When configuring a new node on Android in dev, the `Host` field must be `10.0.2.2` - `127.0.0.1` or `localhost` won't work.
+
 ## Reproducible builds
 
 Reproducible builds are available for Android only right now. You'll need Docker installed to be able to build the app this way:
@@ -144,16 +154,6 @@ If you want to install the APK built this way onto your own smartphone, you'll n
 3. Sign the chosen APK file using this command: `java -jar /usr/bin/apksigner sign -v --ks zeus.pfx --ks-key-alias zeus --ks-pass pass:your_keystore_password --key-pass pass:your_key_password zeus-universal.apk`
 4. Copy the signed APK to your smartphone and install it by tapping over the file. If you get an error, you'll have to uninstall your currently installed version of Zeus first. Note that you'll lose your connections and you'll need to reconfigure Zeus again to connect to your node.
 
-## Contributing
-
-Please be sure to run `yarn run tsc` to check for type errors, `yarn run test` to run all tests, and `yarn run prettier` to run the prettier
-
-If you are making cosmetic changes please test on both Android and iOS as things don't render exactly the same on both platforms.
-
-If you're looking for a quick way to get a lightning development environment running, check out [Polar](https://github.com/jamaljsr/polar).
-
-NOTE: When configuring a new node on Android in dev, the `Host` field must be `10.0.2.2` - `127.0.0.1` or `localhost` won't work.
-
 ## Translations
 
 Do not directly modify the files in `/locales` unless you are adding new copy to the app in English. Instead, translators and reviewers should visit out [Transifex page](https://www.transifex.com/ZeusLN/zeus/) and request a role on the language you'd like to contribute to.

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -5,6 +5,7 @@
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.NFC" />
     <uses-permission android:name="android.permission.VIBRATE"/>
+
     <uses-feature android:name="android.hardware.nfc.hce" android:required="false" />
 
     <queries>

diff --git a/android/build.gradle b/android/build.gradle
@@ -8,6 +8,8 @@ buildscript {
         ndkVersion = "22.1.7171670"
         supportLibVersion = "28.0.0"
         kotlinVersion = "1.6.0"
+        // hack for react-native-camera-kit
+        kotlin_version = kotlinVersion
     }
     repositories {
         google()

diff --git a/components/BalanceSlider.tsx b/components/BalanceSlider.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Slider } from 'react-native-elements';
-import { themeColor } from './../utils/ThemeUtils';
+import { ChannelItem } from '../components/Channels/ChannelItem';
 
 interface BalanceSliderProps {
     localBalance: string | number;
@@ -14,22 +13,14 @@ export default class BalanceSlider extends React.Component<
     {}
 > {
     render() {
-        const { localBalance, remoteBalance, list } = this.props;
-
-        const totalBalance =
-            Number(localBalance || 0) + Number(remoteBalance || 0);
-
-        const ratio = Number(localBalance) / Number(totalBalance) || 0;
-
+        const { localBalance, remoteBalance } = this.props;
         return (
-            <View style={list ? styles.sliderList : styles.slider}>
-                <Slider
-                    value={ratio}
-                    minimumTrackTintColor={themeColor('outbound')}
-                    maximumTrackTintColor={themeColor('inbound')}
-                    trackStyle={styles.trackStyle}
-                    thumbStyle={styles.thumbStyle}
-                    disabled
+            <View style={styles.slider}>
+                <ChannelItem
+                    inbound={remoteBalance}
+                    outbound={localBalance}
+                    noBorder
+                    hideLabels
                 />
             </View>
         );
@@ -41,18 +32,5 @@ const styles = StyleSheet.create({
         flex: 1,
         marginLeft: 20,
         marginRight: 20
-    },
-    sliderList: {
-        marginTop: -15,
-        marginLeft: 65,
-        marginRight: 20,
-        marginBottom: -5
-    },
-    trackStyle: {
-        backgroundColor: 'orange'
-    },
-    thumbStyle: {
-        width: 0,
-        height: 0
     }
 });
diff --git a/components/Channels/ChannelItem.tsx b/components/Channels/ChannelItem.tsx
@@ -21,14 +21,20 @@ export function ChannelItem({
     outbound,
     largestTotal,
     status,
-    pendingTimelock
+    pendingTimelock,
+    noBorder,
+    hideLabels,
+    selected
 }: {
-    title: string;
+    title?: string;
     inbound: number;
     outbound: number;
     largestTotal?: number;
-    status: Status;
+    status?: Status;
     pendingTimelock?: String;
+    noBorder?: boolean;
+    hideLabels?: boolean;
+    selected?: boolean;
 }) {
     const { settings } = Stores.settingsStore;
     const { privacy } = settings;
@@ -48,13 +54,15 @@ export function ChannelItem({
                 padding: 16,
                 justifyContent: 'space-around',
                 borderBottomColor: themeColor('secondary'),
-                borderBottomWidth: 1
+                borderBottomWidth: noBorder ? 0 : 1
             }}
         >
             <Row justify="space-between">
                 {title && (
                     <View style={{ flex: 1, paddingRight: 10 }}>
-                        <Body>{PrivacyUtils.sensitiveValue(title)}</Body>
+                        <Body color={selected ? 'highlight' : 'text'}>
+                            {PrivacyUtils.sensitiveValue(title)}
+                        </Body>
                     </View>
                 )}
                 {pendingTimelock ? (
@@ -68,7 +76,7 @@ export function ChannelItem({
                         <Body small={true}>{pendingTimelock}</Body>
                     </View>
                 ) : null}
-                <Tag status={status} />
+                {status && <Tag status={status} />}
             </Row>
             {inbound && outbound && (
                 <Row style={{ marginTop: 15, marginBottom: 15 }}>
@@ -81,10 +89,12 @@ export function ChannelItem({
                     />
                 </Row>
             )}
-            <Row justify="space-between">
-                <Amount sats={outbound} sensitive />
-                <Amount sats={inbound} sensitive />
-            </Row>
+            {!hideLabels && (
+                <Row justify="space-between">
+                    <Amount sats={outbound} sensitive />
+                    <Amount sats={inbound} sensitive />
+                </Row>
+            )}
         </View>
     );
 }
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Header, Icon } from 'react-native-elements';
+import { themeColor } from '../utils/ThemeUtils';
+
+interface HeaderProps {
+    leftComponent?: 'Back' | 'Close' | JSX.Element;
+    centerComponent?: JSX.Element;
+    rightComponent?: JSX.Element;
+    containerStyle?: any;
+    placement?: 'left' | 'center' | 'right' | undefined;
+    navigation?: any;
+    onBack?: () => void;
+}
+
+function ZeusHeader(props: HeaderProps) {
+    const BackButton = (onBack?: () => void) => (
+        <Icon
+            name="arrow-back"
+            onPress={() => {
+                if (onBack) onBack();
+                props.navigation.goBack();
+            }}
+            color={themeColor('text')}
+            underlayColor="transparent"
+        />
+    );
+
+    const CloseButton = (onBack?: () => void) => (
+        <Icon
+            name="close"
+            onPress={() => {
+                if (onBack) onBack();
+                props.navigation.goBack();
+            }}
+            color={themeColor('text')}
+            underlayColor="transparent"
+        />
+    );
+
+    const {
+        leftComponent,
+        centerComponent,
+        rightComponent,
+        containerStyle,
+        placement,
+        onBack
+    } = props;
+    return (
+        <Header
+            leftComponent={
+                leftComponent === 'Back'
+                    ? BackButton(onBack)
+                    : leftComponent === 'Close'
+                    ? CloseButton(onBack)
+                    : leftComponent
+                    ? leftComponent
+                    : undefined
+            }
+            centerComponent={centerComponent ? centerComponent : undefined}
+            rightComponent={rightComponent ? rightComponent : undefined}
+            backgroundColor="transparent"
+            containerStyle={{
+                ...containerStyle,
+                borderBottomWidth: 0
+            }}
+            placement={placement}
+        />
+    );
+}
+
+export default ZeusHeader;