/** @type {AppStorage} */
import React, { Component } from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Icon, Button, FormLabel, FormInput, Text, Header, List, ListItem } from 'react-native-elements';
import { TouchableOpacity, ActivityIndicator, View, StyleSheet, Dimensions, Image, SafeAreaView, Clipboard, Platform } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { WatchOnlyWallet, LegacyWallet } from './class';
import Carousel from 'react-native-snap-carousel';
import DeviceInfo from 'react-native-device-info';
import { HDLegacyP2PKHWallet } from './class/hd-legacy-p2pkh-wallet';
import { HDLegacyBreadwalletWallet } from './class/hd-legacy-breadwallet-wallet';
import { HDSegwitP2SHWallet } from './class/hd-segwit-p2sh-wallet';
import { LightningCustodianWallet } from './class/lightning-custodian-wallet';
let loc = require('./loc/');
/** @type {AppStorage} */
let BlueApp = require('./BlueApp');
const { height, width } = Dimensions.get('window');
const aspectRatio = height / width;
let isIpad;
if (aspectRatio > 1.6) {
isIpad = false;
} else {
isIpad = true;
}
export class BlueButton extends Component {
render() {
// eslint-disable-next-line
this.props.buttonStyle = this.props.buttonStyle || {};
return (
);
}
}
export class BitcoinButton extends Component {
render() {
return (
{
// eslint-disable-next-line
if (this.props.onPress) this.props.onPress();
}}
>
{loc.wallets.add.bitcoin}
);
}
}
export class LightningButton extends Component {
render() {
return (
{
// eslint-disable-next-line
if (this.props.onPress) this.props.onPress();
}}
>
{loc.wallets.add.lightning}
);
}
}
export class BlueButtonLink extends Component {
render() {
// eslint-disable-next-line
this.props.buttonStyle = this.props.buttonStyle || {};
return (
);
}
}
export const BlueNavigationStyle = (navigation, withNavigationCloseButton = false, customCloseButtonFunction = undefined) => ({
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: 0,
elevation: 0,
},
headerTitleStyle: {
fontWeight: '600',
color: '#0c2550',
},
headerTintColor: '#0c2550',
headerRight: withNavigationCloseButton ? (
navigation.goBack(null) : customCloseButtonFunction}
>
) : null,
headerBackTitle: null,
});
export const BlueCopyToClipboardButton = ({ stringToCopy }) => {
return (
Clipboard.setString(stringToCopy)}>
{loc.transactions.details.copy}
);
};
export class SafeBlueArea extends Component {
render() {
return (
);
}
}
export class BlueCard extends Component {
render() {
return ;
}
}
export class BlueText extends Component {
render() {
return (
);
}
}
export class BlueTextCentered extends Component {
render() {
return ;
}
}
export class BlueListItem extends Component {
render() {
return (
);
}
}
export class BlueFormLabel extends Component {
render() {
return ;
}
}
export class BlueFormInput extends Component {
render() {
return (
);
}
}
export class BlueFormMultiInput extends Component {
render() {
return (
);
}
}
export class BlueFormInputAddress extends Component {
render() {
return (
);
}
}
export class BlueHeader extends Component {
render() {
return (
);
}
}
export class BlueHeaderDefaultSub extends Component {
render() {
return (
{
// eslint-disable-next-line
this.props.leftText
}
}
rightComponent={
{
// eslint-disable-next-line
if (this.props.onClose) this.props.onClose();
}}
>
}
{...this.props}
/>
);
}
}
export class BlueHeaderDefaultMain extends Component {
render() {
return (
{
// eslint-disable-next-line
this.props.leftText
}
}
rightComponent={
}
/>
);
}
}
export class BlueSpacing extends Component {
render() {
return ;
}
}
export class BlueSpacing40 extends Component {
render() {
return ;
}
}
export class BlueSpacingVariable extends Component {
render() {
if (isIpad) {
return ;
} else {
return ;
}
}
}
export class is {
static ipad() {
return isIpad;
}
static iphone8() {
if (Platform.OS !== 'ios') {
return false;
}
return DeviceInfo.getDeviceId() === 'iPhone10,4';
}
}
export class BlueSpacing20 extends Component {
render() {
return ;
}
}
export class BlueList extends Component {
render() {
return (
);
}
}
export class BlueLoading extends Component {
render() {
return (
);
}
}
const stylesBlueIcon = StyleSheet.create({
container: {
flex: 1,
},
box1: {
position: 'relative',
top: 15,
},
box: {
alignSelf: 'flex-end',
paddingHorizontal: 14,
paddingTop: 8,
},
boxIncomming: {
position: 'relative',
},
ball: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: '#ccddf9',
},
ballIncomming: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: '#d2f8d6',
transform: [{ rotate: '-45deg' }],
},
ballReceive: {
width: 30,
height: 30,
borderBottomLeftRadius: 15,
backgroundColor: '#d2f8d6',
transform: [{ rotate: '-45deg' }],
},
ballOutgoing: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: '#f8d2d2',
transform: [{ rotate: '225deg' }],
},
ballTransparrent: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: 'transparent',
},
ballDimmed: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: 'gray',
},
});
export class BluePlusIcon extends Component {
render() {
return (
);
}
}
export class BlueTransactionIncommingIcon extends Component {
render() {
return (
);
}
}
export class BlueTransactionPendingIcon extends Component {
render() {
return (
);
}
}
export class BlueTransactionOnchainIcon extends Component {
render() {
return (
);
}
}
export class BlueTransactionOffchainIcon extends Component {
render() {
return (
);
}
}
export class BlueTransactionOffchainIncomingIcon extends Component {
render() {
return (
);
}
}
export class BlueTransactionOutgoingIcon extends Component {
render() {
return (
);
}
}
//
export class BlueReceiveButtonIcon extends Component {
render() {
return (
{loc.receive.header.toLowerCase()}
);
}
}
export class BlueSendButtonIcon extends Component {
render() {
return (
{loc.send.header.toLowerCase()}
);
}
}
export class ManageFundsBigButton extends Component {
render() {
return (
{loc.lnd.title}
);
}
}
export class BluePlusIconDimmed extends Component {
render() {
return (
);
}
}
export class NewWalletPanel extends Component {
constructor(props) {
super(props);
// WalletsCarousel.handleClick = props.handleClick // because cant access `this` from _renderItem
// eslint-disable-next-line
this.handleClick = props.onPress;
}
render() {
return (
{
if (this.handleClick) {
this.handleClick();
}
}}
style={{ marginVertical: 17 }}
>
{loc.wallets.list.create_a_wallet}
{loc.wallets.list.create_a_wallet1}
{loc.wallets.list.create_a_wallet2}
);
}
}
const sliderWidth = width * 1;
const itemWidth = width * 0.82;
const sliderHeight = 190;
export class WalletsCarousel extends Component {
constructor(props) {
super(props);
// eslint-disable-next-line
WalletsCarousel.handleClick = props.handleClick; // because cant access `this` from _renderItem
WalletsCarousel.handleLongPress = props.handleLongPress;
// eslint-disable-next-line
this.onSnapToItem = props.onSnapToItem;
}
_renderItem({ item, index }) {
if (!item) {
return (
{
if (WalletsCarousel.handleClick) {
WalletsCarousel.handleClick(index);
}
}}
/>
);
}
let gradient1 = '#65ceef';
let gradient2 = '#68bbe1';
if (new WatchOnlyWallet().type === item.type) {
gradient1 = '#7d7d7d';
gradient2 = '#4a4a4a';
}
if (new LegacyWallet().type === item.type) {
gradient1 = '#40fad1';
gradient2 = '#15be98';
}
if (new HDLegacyP2PKHWallet().type === item.type) {
gradient1 = '#e36dfa';
gradient2 = '#bd10e0';
}
if (new HDLegacyBreadwalletWallet().type === item.type) {
gradient1 = '#fe6381';
gradient2 = '#f99c42';
}
if (new HDSegwitP2SHWallet().type === item.type) {
gradient1 = '#c65afb';
gradient2 = '#9053fe';
}
if (new LightningCustodianWallet().type === item.type) {
gradient1 = '#f1be07';
gradient2 = '#f79056';
}
return (
{
if (WalletsCarousel.handleClick) {
WalletsCarousel.handleClick(index, [gradient1, gradient2]);
}
}}
>
{item.getLabel()}
{loc.formatBalance(item.getBalance())}
{loc.wallets.list.latest_transaction}
{loc.transactionTimeToReadable(item.getLatestTransactionTime())}
);
}
render() {
return (
{
WalletsCarousel.carousel = c;
}}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
sliderHeight={sliderHeight}
itemWidth={itemWidth}
inactiveSlideScale={1}
inactiveSlideOpacity={0.7}
contentContainerCustomStyle={{ left: -20 }}
onSnapToItem={index => {
if (this.onSnapToItem) {
this.onSnapToItem(index);
}
console.log('snapped to card #', index);
}}
/>
);
}
}