mirror of
https://github.com/BlueWallet/BlueWallet.git
synced 2025-03-04 04:13:49 +01:00
REF: BlueComponents Icons
This commit is contained in:
Ivan Vershigora
parent
bfed60cd7e
commit
261182b65a
12 changed files with 333 additions and 375 deletions
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */
|
||||
import React, { Component, forwardRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Icon, Input, Text, Header, ListItem, Avatar } from 'react-native-elements';
|
||||
import { Icon, Text, Header, ListItem, Avatar } from 'react-native-elements';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
|
|
@ -11,7 +11,6 @@ import {
|
|||
InputAccessoryView,
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
PixelRatio,
|
||||
Platform,
|
||||
PlatformColor,
|
||||
SafeAreaView,
|
||||
|
|
@ -28,6 +27,7 @@ import NetworkTransactionFees, { NetworkTransactionFee, NetworkTransactionFeeTyp
|
|||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
import { BlueCurrentTheme } from './components/themes';
|
||||
import PlusIcon from './components/icons/PlusIcon';
|
||||
import loc, { formatStringAddTwoWhiteSpaces } from './loc';
|
||||
|
||||
const { height, width } = Dimensions.get('window');
|
||||
|
|
@ -389,6 +389,7 @@ export const BlueTextCentered = props => {
|
|||
const { colors } = useTheme();
|
||||
return <Text {...props} style={{ color: colors.foregroundColor, textAlign: 'center' }} />;
|
||||
};
|
||||
|
||||
export const BlueListItem = React.memo(props => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
|
|
@ -472,24 +473,6 @@ export const BlueFormLabel = props => {
|
|||
);
|
||||
};
|
||||
|
||||
export const BlueFormInput = props => {
|
||||
const { colors } = useTheme();
|
||||
return (
|
||||
<Input
|
||||
{...props}
|
||||
inputStyle={{ color: colors.foregroundColor, maxWidth: width - 105 }}
|
||||
containerStyle={{
|
||||
marginTop: 5,
|
||||
borderColor: colors.inputBorderColor,
|
||||
borderBottomColor: colors.inputBorderColor,
|
||||
borderWidth: 0.5,
|
||||
borderBottomWidth: 0.5,
|
||||
backgroundColor: colors.inputBackgroundColor,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueFormMultiInput = props => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
|
|
@ -523,19 +506,6 @@ export const BlueFormMultiInput = props => {
|
|||
);
|
||||
};
|
||||
|
||||
export const BlueHeader = props => {
|
||||
return (
|
||||
<Header
|
||||
{...props}
|
||||
backgroundColor="transparent"
|
||||
outerContainerStyles={{
|
||||
borderBottomColor: 'transparent',
|
||||
borderBottomWidth: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueHeaderDefaultSub = props => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
|
|
@ -592,7 +562,7 @@ export const BlueHeaderDefaultMain = props => {
|
|||
>
|
||||
{props.leftText}
|
||||
</Text>
|
||||
<BluePlusIcon onPress={props.onNewWalletPress} Component={TouchableOpacity} />
|
||||
<PlusIcon onPress={props.onNewWalletPress} Component={TouchableOpacity} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
@ -605,14 +575,6 @@ export const BlueSpacing40 = props => {
|
|||
return <View {...props} style={{ height: 50 }} />;
|
||||
};
|
||||
|
||||
export const BlueSpacingVariable = props => {
|
||||
if (isIpad) {
|
||||
return <BlueSpacing40 {...props} />;
|
||||
} else {
|
||||
return <BlueSpacing {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
export class is {
|
||||
static ipad() {
|
||||
return isIpad;
|
||||
|
|
@ -690,299 +652,6 @@ export const BlueLoading = props => {
|
|||
);
|
||||
};
|
||||
|
||||
const stylesBlueIcon = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
box1: {
|
||||
position: 'relative',
|
||||
top: 15,
|
||||
},
|
||||
box: {
|
||||
alignSelf: 'flex-end',
|
||||
paddingHorizontal: 14,
|
||||
paddingTop: 8,
|
||||
},
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ball: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
ballIncoming: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
transform: [{ rotate: '-45deg' }],
|
||||
justifyContent: 'center',
|
||||
},
|
||||
ballIncomingWithoutRotate: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
ballReceive: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderBottomLeftRadius: 15,
|
||||
transform: [{ rotate: '-45deg' }],
|
||||
},
|
||||
ballOutgoing: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
transform: [{ rotate: '225deg' }],
|
||||
justifyContent: 'center',
|
||||
},
|
||||
ballOutgoingWithoutRotate: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
ballOutgoingExpired: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
ballTransparrent: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
ballDimmed: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
backgroundColor: 'gray',
|
||||
},
|
||||
});
|
||||
|
||||
export const BluePlusIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ball: {
|
||||
backgroundColor: colors.buttonBackgroundColor,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<Avatar
|
||||
rounded
|
||||
containerStyle={[stylesBlueIcon.ball, stylesBlueIconHooks.ball]}
|
||||
icon={{ name: 'add', size: 22, type: 'ionicons', color: colors.foregroundColor }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionIncomingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballIncoming: {
|
||||
backgroundColor: colors.ballReceive,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ballIncoming, stylesBlueIconHooks.ballIncoming]}>
|
||||
<Icon {...props} name="arrow-down" size={16} type="font-awesome" color={colors.incomingForegroundColor} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionPendingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ball: {
|
||||
backgroundColor: colors.buttonBackgroundColor,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ball, stylesBlueIconHooks.ball]}>
|
||||
<Icon
|
||||
{...props}
|
||||
name="kebab-horizontal"
|
||||
size={16}
|
||||
type="octicon"
|
||||
color={colors.foregroundColor}
|
||||
iconStyle={{ left: 0, top: 7 }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionExpiredIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballOutgoingExpired: {
|
||||
backgroundColor: colors.ballOutgoingExpired,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ballOutgoingExpired, stylesBlueIconHooks.ballOutgoingExpired]}>
|
||||
<Icon {...props} name="clock" size={16} type="octicon" color="#9AA0AA" iconStyle={{ left: 0, top: 0 }} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionOnchainIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballIncoming: {
|
||||
backgroundColor: colors.ballReceive,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ballIncoming, stylesBlueIconHooks.ballIncoming]}>
|
||||
<Icon
|
||||
{...props}
|
||||
name="link"
|
||||
size={16}
|
||||
type="font-awesome"
|
||||
color={colors.incomingForegroundColor}
|
||||
iconStyle={{ left: 0, top: 0, transform: [{ rotate: '-45deg' }] }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionOffchainIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballOutgoingWithoutRotate: {
|
||||
backgroundColor: colors.ballOutgoing,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ballOutgoingWithoutRotate, stylesBlueIconHooks.ballOutgoingWithoutRotate]}>
|
||||
<Icon
|
||||
{...props}
|
||||
name="bolt"
|
||||
size={16}
|
||||
type="font-awesome"
|
||||
color={colors.outgoingForegroundColor}
|
||||
iconStyle={{ left: 0, marginTop: 6 }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionOffchainIncomingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballIncomingWithoutRotate: {
|
||||
backgroundColor: colors.ballReceive,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ballIncomingWithoutRotate, stylesBlueIconHooks.ballIncomingWithoutRotate]}>
|
||||
<Icon
|
||||
{...props}
|
||||
name="bolt"
|
||||
size={16}
|
||||
type="font-awesome"
|
||||
color={colors.incomingForegroundColor}
|
||||
iconStyle={{ left: 0, marginTop: 6 }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const BlueTransactionOutgoingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballOutgoing: {
|
||||
backgroundColor: colors.ballOutgoing,
|
||||
},
|
||||
});
|
||||
return (
|
||||
<View {...props}>
|
||||
<View style={stylesBlueIcon.boxIncoming}>
|
||||
<View style={[stylesBlueIcon.ballOutgoing, stylesBlueIconHooks.ballOutgoing]}>
|
||||
<Icon {...props} name="arrow-down" size={16} type="font-awesome" color={colors.outgoingForegroundColor} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const sendReceiveScanButtonFontSize =
|
||||
PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26) > 22
|
||||
? 22
|
||||
: PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26);
|
||||
export const BlueReceiveButtonIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
|
||||
return (
|
||||
<TouchableOpacity accessibilityRole="button" {...props} style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: colors.buttonBackgroundColor,
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<View
|
||||
style={{
|
||||
left: 5,
|
||||
backgroundColor: 'transparent',
|
||||
transform: [{ rotate: '-45deg' }],
|
||||
alignItems: 'center',
|
||||
marginRight: 8,
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
{...props}
|
||||
name="arrow-down"
|
||||
size={sendReceiveScanButtonFontSize}
|
||||
type="font-awesome"
|
||||
color={colors.buttonAlternativeTextColor}
|
||||
/>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.buttonAlternativeTextColor,
|
||||
fontWeight: '500',
|
||||
fontSize: sendReceiveScanButtonFontSize,
|
||||
left: 5,
|
||||
backgroundColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
{formatStringAddTwoWhiteSpaces(loc.receive.header)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
export class BlueReplaceFeeSuggestions extends Component {
|
||||
static propTypes = {
|
||||
onFeeSelected: PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -2,24 +2,23 @@
|
|||
import React, { useState, useMemo, useCallback, useContext, useEffect, useRef } from 'react';
|
||||
import { Linking, StyleSheet, View } from 'react-native';
|
||||
import Clipboard from '@react-native-clipboard/clipboard';
|
||||
import { BitcoinUnit } from '../models/bitcoinUnits';
|
||||
import * as NavigationService from '../NavigationService';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { useNavigation, useTheme } from '@react-navigation/native';
|
||||
|
||||
import { BitcoinUnit } from '../models/bitcoinUnits';
|
||||
import * as NavigationService from '../NavigationService';
|
||||
import loc, { formatBalanceWithoutSuffix, transactionTimeToReadable } from '../loc';
|
||||
import Lnurl from '../class/lnurl';
|
||||
import { BlueStorageContext } from '../blue_modules/storage-context';
|
||||
import ToolTipMenu from './TooltipMenu';
|
||||
import {
|
||||
BlueListItem,
|
||||
BlueTransactionExpiredIcon,
|
||||
BlueTransactionIncomingIcon,
|
||||
BlueTransactionOffchainIcon,
|
||||
BlueTransactionOffchainIncomingIcon,
|
||||
BlueTransactionOnchainIcon,
|
||||
BlueTransactionOutgoingIcon,
|
||||
BlueTransactionPendingIcon,
|
||||
} from '../BlueComponents';
|
||||
import { BlueListItem } from '../BlueComponents';
|
||||
import TransactionExpiredIcon from '../components/icons/TransactionExpiredIcon';
|
||||
import TransactionIncomingIcon from '../components/icons/TransactionIncomingIcon';
|
||||
import TransactionOffchainIcon from '../components/icons/TransactionOffchainIcon';
|
||||
import TransactionOffchainIncomingIcon from '../components/icons/TransactionOffchainIncomingIcon';
|
||||
import TransactionOnchainIcon from '../components/icons/TransactionOnchainIcon';
|
||||
import TransactionOutgoingIcon from '../components/icons/TransactionOutgoingIcon';
|
||||
import TransactionPendingIcon from '../components/icons/TransactionPendingIcon';
|
||||
|
||||
export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, walletID }) => {
|
||||
const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);
|
||||
|
|
@ -114,7 +113,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn
|
|||
if (item.category === 'receive' && item.confirmations < 3) {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionPendingIcon />
|
||||
<TransactionPendingIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -122,7 +121,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn
|
|||
if (item.type && item.type === 'bitcoind_tx') {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionOnchainIcon />
|
||||
<TransactionOnchainIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -130,7 +129,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn
|
|||
// is it lightning offchain payment?
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionOffchainIcon />
|
||||
<TransactionOffchainIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -143,14 +142,14 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn
|
|||
if (invoiceExpiration < now) {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionExpiredIcon />
|
||||
<TransactionExpiredIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionOffchainIncomingIcon />
|
||||
<TransactionOffchainIncomingIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -159,19 +158,19 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn
|
|||
if (!item.confirmations) {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionPendingIcon />
|
||||
<TransactionPendingIcon />
|
||||
</View>
|
||||
);
|
||||
} else if (item.value < 0) {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionOutgoingIcon />
|
||||
<TransactionOutgoingIcon />
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<View style={styles.iconWidth}>
|
||||
<BlueTransactionIncomingIcon />
|
||||
<TransactionIncomingIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
32
components/icons/PlusIcon.js
Normal file
32
components/icons/PlusIcon.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Avatar } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
ball: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
});
|
||||
|
||||
const PlusIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesHook = StyleSheet.create({
|
||||
ball: {
|
||||
backgroundColor: colors.buttonBackgroundColor,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Avatar
|
||||
rounded
|
||||
containerStyle={[styles.ball, stylesHook.ball]}
|
||||
icon={{ name: 'add', size: 22, type: 'ionicons', color: colors.foregroundColor }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlusIcon;
|
||||
39
components/icons/TransactionExpiredIcon.js
Normal file
39
components/icons/TransactionExpiredIcon.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ballOutgoingExpired: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
icon: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionExpiredIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesHooks = StyleSheet.create({
|
||||
ballOutgoingExpired: {
|
||||
backgroundColor: colors.ballOutgoingExpired,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ballOutgoingExpired, stylesHooks.ballOutgoingExpired]}>
|
||||
<Icon name="clock" size={16} type="octicon" color="#9AA0AA" iconStyle={styles.icon} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionExpiredIcon;
|
||||
36
components/icons/TransactionIncomingIcon.js
Normal file
36
components/icons/TransactionIncomingIcon.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ballIncoming: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
transform: [{ rotate: '-45deg' }],
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionIncomingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesHooks = StyleSheet.create({
|
||||
ballIncoming: {
|
||||
backgroundColor: colors.ballReceive,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ballIncoming, stylesHooks.ballIncoming]}>
|
||||
<Icon name="arrow-down" size={16} type="font-awesome" color={colors.incomingForegroundColor} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionIncomingIcon;
|
||||
38
components/icons/TransactionOffchainIcon.js
Normal file
38
components/icons/TransactionOffchainIcon.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ballOutgoingWithoutRotate: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
icon: {
|
||||
left: 0,
|
||||
marginTop: 6,
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionOffchainIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesHooks = StyleSheet.create({
|
||||
ballOutgoingWithoutRotate: {
|
||||
backgroundColor: colors.ballOutgoing,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ballOutgoingWithoutRotate, stylesHooks.ballOutgoingWithoutRotate]}>
|
||||
<Icon name="bolt" size={16} type="font-awesome" color={colors.outgoingForegroundColor} iconStyle={styles.icon} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionOffchainIcon;
|
||||
38
components/icons/TransactionOffchainIncomingIcon.js
Normal file
38
components/icons/TransactionOffchainIncomingIcon.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ballIncomingWithoutRotate: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
icon: {
|
||||
left: 0,
|
||||
marginTop: 6,
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionOffchainIncomingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesHooks = StyleSheet.create({
|
||||
ballIncomingWithoutRotate: {
|
||||
backgroundColor: colors.ballReceive,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ballIncomingWithoutRotate, stylesHooks.ballIncomingWithoutRotate]}>
|
||||
<Icon name="bolt" size={16} type="font-awesome" color={colors.incomingForegroundColor} iconStyle={styles.icon} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionOffchainIncomingIcon;
|
||||
41
components/icons/TransactionOnchainIcon.js
Normal file
41
components/icons/TransactionOnchainIcon.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ballIncoming: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
transform: [{ rotate: '-45deg' }],
|
||||
justifyContent: 'center',
|
||||
},
|
||||
icon: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
transform: [{ rotate: '-45deg' }],
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionOnchainIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballIncoming: {
|
||||
backgroundColor: colors.ballReceive,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ballIncoming, stylesBlueIconHooks.ballIncoming]}>
|
||||
<Icon name="link" size={16} type="font-awesome" color={colors.incomingForegroundColor} iconStyle={styles.icon} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionOnchainIcon;
|
||||
36
components/icons/TransactionOutgoingIcon.js
Normal file
36
components/icons/TransactionOutgoingIcon.js
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ballOutgoing: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
transform: [{ rotate: '225deg' }],
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionOutgoingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesBlueIconHooks = StyleSheet.create({
|
||||
ballOutgoing: {
|
||||
backgroundColor: colors.ballOutgoing,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ballOutgoing, stylesBlueIconHooks.ballOutgoing]}>
|
||||
<Icon name="arrow-down" size={16} type="font-awesome" color={colors.outgoingForegroundColor} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionOutgoingIcon;
|
||||
38
components/icons/TransactionPendingIcon.js
Normal file
38
components/icons/TransactionPendingIcon.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useTheme } from '@react-navigation/native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
boxIncoming: {
|
||||
position: 'relative',
|
||||
},
|
||||
ball: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 15,
|
||||
},
|
||||
icon: {
|
||||
left: 0,
|
||||
top: 7,
|
||||
},
|
||||
});
|
||||
|
||||
const TransactionPendingIcon = props => {
|
||||
const { colors } = useTheme();
|
||||
const stylesHook = StyleSheet.create({
|
||||
ball: {
|
||||
backgroundColor: colors.buttonBackgroundColor,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.boxIncoming}>
|
||||
<View style={[styles.ball, stylesHook.ball]}>
|
||||
<Icon name="kebab-horizontal" size={16} type="octicon" color={colors.foregroundColor} iconStyle={styles.icon} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionPendingIcon;
|
||||
|
|
@ -2,27 +2,19 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
|
|||
import { View, ActivityIndicator, Text, TouchableOpacity, StyleSheet, StatusBar, BackHandler } from 'react-native';
|
||||
import { Icon } from 'react-native-elements';
|
||||
import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
|
||||
|
||||
import {
|
||||
BlueButton,
|
||||
BlueCard,
|
||||
BlueLoading,
|
||||
BlueSpacing10,
|
||||
BlueSpacing20,
|
||||
BlueText,
|
||||
BlueTransactionIncomingIcon,
|
||||
BlueTransactionOutgoingIcon,
|
||||
BlueTransactionPendingIcon,
|
||||
SafeBlueArea,
|
||||
} from '../../BlueComponents';
|
||||
import { BlueButton, BlueCard, BlueLoading, BlueSpacing10, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
|
||||
import TransactionIncomingIcon from '../components/icons/TransactionIncomingIcon';
|
||||
import TransactionOutgoingIcon from '../components/icons/TransactionOutgoingIcon';
|
||||
import TransactionPendingIcon from '../components/icons/TransactionPendingIcon';
|
||||
import navigationStyle from '../../components/navigationStyle';
|
||||
import HandoffComponent from '../../components/handoff';
|
||||
import { HDSegwitBech32Transaction } from '../../class';
|
||||
import { BitcoinUnit } from '../../models/bitcoinUnits';
|
||||
import HandoffComponent from '../../components/handoff';
|
||||
import loc, { formatBalanceWithoutSuffix } from '../../loc';
|
||||
import { BlueStorageContext } from '../../blue_modules/storage-context';
|
||||
import * as BlueElectrum from '../../blue_modules/BlueElectrum';
|
||||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
|
||||
|
||||
const buttonStatus = Object.freeze({
|
||||
possible: 1,
|
||||
|
|
@ -391,19 +383,19 @@ const TransactionsStatus = () => {
|
|||
if (!tx.confirmations) {
|
||||
return (
|
||||
<View style={styles.icon}>
|
||||
<BlueTransactionPendingIcon />
|
||||
<TransactionPendingIcon />
|
||||
</View>
|
||||
);
|
||||
} else if (tx.value < 0) {
|
||||
return (
|
||||
<View style={styles.icon}>
|
||||
<BlueTransactionOutgoingIcon />
|
||||
<TransactionOutgoingIcon />
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<View style={styles.icon}>
|
||||
<BlueTransactionIncomingIcon />
|
||||
<TransactionIncomingIcon />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
import TestRenderer from 'react-test-renderer';
|
||||
import Settings from '../../screen/settings/settings';
|
||||
import Selftest from '../../screen/selftest';
|
||||
import { BlueHeader } from '../../BlueComponents';
|
||||
import { BlueHeaderDefaultSub } from '../../BlueComponents';
|
||||
import * as BlueElectrum from '../../blue_modules/BlueElectrum';
|
||||
|
||||
jest.mock('react-native-qrcode-svg', () => 'Video');
|
||||
|
|
@ -21,8 +21,8 @@ afterAll(() => {
|
|||
BlueElectrum.forceDisconnect();
|
||||
});
|
||||
|
||||
it('BlueHeader works', () => {
|
||||
const rendered = TestRenderer.create(<BlueHeader />).toJSON();
|
||||
it('BlueHeaderDefaultSub works', () => {
|
||||
const rendered = TestRenderer.create(<BlueHeaderDefaultSub />).toJSON();
|
||||
expect(rendered).toBeTruthy();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue