From 15484172a2a8b87f250c50506c7123a0e2990365 Mon Sep 17 00:00:00 2001 From: Ivan Date: Thu, 15 Oct 2020 19:25:24 +0300 Subject: [PATCH] REF: WalletsCarousel --- BlueComponents.js | 320 +------------------------------ WatchConnectivity.ios.js | 2 +- components/WalletsCarousel.js | 345 ++++++++++++++++++++++++++++++++++ loc/en.json | 3 +- screen/wallets/drawerList.js | 3 +- screen/wallets/list.js | 3 +- 6 files changed, 352 insertions(+), 324 deletions(-) create mode 100644 components/WalletsCarousel.js diff --git a/BlueComponents.js b/BlueComponents.js index 2f04ae973..ddb5860e0 100644 --- a/BlueComponents.js +++ b/BlueComponents.js @@ -29,8 +29,7 @@ import { import Clipboard from '@react-native-community/clipboard'; import LinearGradient from 'react-native-linear-gradient'; import ActionSheet from './screen/ActionSheet'; -import { LightningCustodianWallet, MultisigHDWallet, PlaceholderWallet } from './class'; -import Carousel from 'react-native-snap-carousel'; +import { LightningCustodianWallet, MultisigHDWallet } from './class'; import { BitcoinUnit } from './models/bitcoinUnits'; import * as NavigationService from './NavigationService'; import WalletGradient from './class/wallet-gradient'; @@ -1561,56 +1560,6 @@ export class ManageFundsBigButton extends Component { } } -export const NewWalletPanel = props => { - const { colors } = useTheme(); - return ( - - - - {loc.wallets.list_create_a_wallet} - - - {loc.wallets.list_create_a_wallet1} - - - {loc.wallets.list_create_a_wallet2} - - - {loc.wallets.list_create_a_button} - - - - ); -}; - export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, timeElapsed }) => { const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1); const { colors } = useTheme(); @@ -1824,273 +1773,6 @@ export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = Bitco ); }); -const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedWallet }) => { - const scaleValue = new Animated.Value(1.0); - - const onPressedIn = () => { - const props = { duration: 50 }; - props.useNativeDriver = true; - - props.toValue = 0.9; - Animated.spring(scaleValue, props).start(); - }; - const onPressedOut = () => { - const props = { duration: 50 }; - - props.useNativeDriver = true; - - props.toValue = 1.0; - Animated.spring(scaleValue, props).start(); - }; - - if (!item) { - return ( - { - onPressedOut(); - onPress(index); - }} - /> - ); - } - - if (item.type === PlaceholderWallet.type) { - return ( - - { - if (item.getIsFailure()) { - onPressedOut(); - onPress(index); - onPressedOut(); - } - }} - > - - - - - {item.getLabel()} - - {item.getIsFailure() ? ( - - {loc.wallets.list_import_error} - - ) : ( - - )} - - - - ); - } else { - let opacity = 1.0; - - if (isSelectedWallet === false) { - opacity = 0.5; - } - return ( - - { - onPressedOut(); - onPress(index); - onPressedOut(); - }} - > - - { - switch (item.type) { - case LightningCustodianWallet.type: - return require('./img/lnd-shape.png'); - case MultisigHDWallet.type: - return require('./img/vault-shape.png'); - default: - return require('./img/btc-shape.png'); - } - })()} - style={{ - width: 99, - height: 94, - position: 'absolute', - bottom: 0, - right: 0, - }} - /> - - - - {item.getLabel()} - - {item.hideBalance ? ( - - ) : ( - - {formatBalance(Number(item.getBalance()), item.getPreferredBalanceUnit(), true)} - - )} - - - {loc.wallets.list_latest_transaction} - - - {transactionTimeToReadable(item.getLatestTransactionTime())} - - - - - ); - } -}; - -const sliderWidth = width * 1; -const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82; -const sliderHeight = 190; - -export class WalletsCarousel extends Component { - walletsCarousel = React.createRef(); - - state = { isLoading: true }; - - _renderItem = ({ item, index }) => { - return ( - - ); - }; - - snapToItem = item => { - // eslint-disable-next-line no-unused-expressions - this.walletsCarousel?.current?.snapToItem(item); - }; - - onLayout = () => { - this.setState({ isLoading: false }); - }; - - render() { - return ( - <> - {this.state.isLoading && ( - - - - )} - - - ); - } -} const isDesktop = getSystemName() === 'Mac OS X'; export class BlueAddressInput extends Component { static propTypes = { diff --git a/WatchConnectivity.ios.js b/WatchConnectivity.ios.js index 71c78ac83..8c8b59d3b 100644 --- a/WatchConnectivity.ios.js +++ b/WatchConnectivity.ios.js @@ -48,7 +48,7 @@ function WatchConnectivity() { watchEvents.on('message', handleMessages); } }); -}; +} WatchConnectivity.sendWalletsToWatch = () => { getIsWatchAppInstalled().then(installed => { diff --git a/components/WalletsCarousel.js b/components/WalletsCarousel.js new file mode 100644 index 000000000..d9d35b0e9 --- /dev/null +++ b/components/WalletsCarousel.js @@ -0,0 +1,345 @@ +import React, { useRef, useCallback, useState, useImperativeHandle, forwardRef } from 'react'; +import PropTypes from 'prop-types'; +import { + ActivityIndicator, + Animated, + Image, + Platform, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + useWindowDimensions, + View, +} from 'react-native'; +import { useTheme } from '@react-navigation/native'; +import LinearGradient from 'react-native-linear-gradient'; +import Carousel from 'react-native-snap-carousel'; + +import loc, { formatBalance, transactionTimeToReadable } from '../loc'; +import { LightningCustodianWallet, MultisigHDWallet, PlaceholderWallet } from '../class'; +import WalletGradient from '../class/wallet-gradient'; +import { BlueCurrentTheme } from './themes'; +import { BluePrivateBalance } from '../BlueComponents'; + +const nStyles = StyleSheet.create({ + root: { + marginVertical: 17, + paddingRight: 10, + }, + container: { + paddingHorizontal: 24, + paddingVertical: 16, + borderRadius: 10, + minHeight: Platform.OS === 'ios' ? 164 : 181, + justifyContent: 'center', + alignItems: 'flex-start', + }, + addAWAllet: { + fontWeight: '600', + fontSize: 24, + marginBottom: 4, + }, + addLine: { + fontSize: 13, + }, + button: { + marginTop: 12, + backgroundColor: '#007AFF', + paddingHorizontal: 32, + paddingVertical: 12, + borderRadius: 8, + }, + buttonText: { + fontWeight: '500', + }, +}); + +const NewWalletPanel = ({ onPress }) => { + const { colors } = useTheme(); + return ( + + + {loc.wallets.list_create_a_wallet} + {loc.wallets.list_create_a_wallet_text} + + {loc.wallets.list_create_a_button} + + + + ); +}; + +NewWalletPanel.propTypes = { + onPress: PropTypes.func.isRequired, +}; + +const iStyles = StyleSheet.create({ + root: { + paddingRight: 10, + marginVertical: 17, + }, + grad: { + padding: 15, + borderRadius: 10, + minHeight: 164, + elevation: 5, + }, + image: { + width: 99, + height: 94, + position: 'absolute', + bottom: 0, + right: 0, + }, + br: { + backgroundColor: 'transparent', + }, + label: { + backgroundColor: 'transparent', + fontSize: 19, + }, + importError: { + backgroundColor: 'transparent', + fontSize: 19, + marginTop: 40, + }, + activity: { + marginTop: 40, + }, + balance: { + backgroundColor: 'transparent', + fontWeight: 'bold', + fontSize: 36, + }, + latestTx: { + backgroundColor: 'transparent', + fontSize: 13, + }, + latestTxTime: { + backgroundColor: 'transparent', + fontWeight: 'bold', + fontSize: 16, + }, +}); + +const WalletCarouselItem = ({ item, index, onPress, handleLongPress, isSelectedWallet }) => { + const scaleValue = new Animated.Value(1.0); + + const onPressedIn = () => { + const props = { duration: 50 }; + props.useNativeDriver = true; + props.toValue = 0.9; + Animated.spring(scaleValue, props).start(); + }; + + const onPressedOut = () => { + const props = { duration: 50 }; + props.useNativeDriver = true; + props.toValue = 1.0; + Animated.spring(scaleValue, props).start(); + }; + + if (!item) + return ( + { + onPressedOut(); + onPress(index); + }} + /> + ); + + if (item.type === PlaceholderWallet.type) { + return ( + + { + if (item.getIsFailure()) { + onPressedOut(); + onPress(index); + onPressedOut(); + } + }} + > + + + + + {item.getLabel()} + + {item.getIsFailure() ? ( + + {loc.wallets.list_import_error} + + ) : ( + + )} + + + + ); + } + + const opacity = isSelectedWallet === false ? 0.5 : 1.0; + let image; + switch (item.type) { + case LightningCustodianWallet.type: + image = require('../img/lnd-shape.png'); + break; + case MultisigHDWallet.type: + image = require('../img/vault-shape.png'); + break; + default: + image = require('../img/btc-shape.png'); + } + + return ( + + { + onPressedOut(); + onPress(index); + onPressedOut(); + }} + > + + + + + {item.getLabel()} + + {item.hideBalance ? ( + + ) : ( + + {formatBalance(Number(item.getBalance()), item.getPreferredBalanceUnit(), true)} + + )} + + + {loc.wallets.list_latest_transaction} + + + {transactionTimeToReadable(item.getLatestTransactionTime())} + + + + + ); +}; + +WalletCarouselItem.propTypes = { + item: PropTypes.any, + index: PropTypes.number.isRequired, + onPress: PropTypes.func.isRequired, + handleLongPress: PropTypes.func.isRequired, + isSelectedWallet: PropTypes.bool, +}; + +const cStyles = StyleSheet.create({ + loading: { + position: 'absolute', + alignItems: 'center', + }, + content: { + left: 20, + }, +}); + +const WalletsCarousel = forwardRef((props, ref) => { + const carouselRef = useRef(); + const [loading, setLoading] = useState(true); + const renderItem = useCallback( + ({ item, index }) => ( + + ), + [props.vertical, props.selectedWallet, props.handleLongPress, props.onPress], + ); + + useImperativeHandle(ref, () => ({ + snapToItem: item => carouselRef?.current?.snapToItem(item), + })); + + const { width } = useWindowDimensions(); + const sliderWidth = width * 1; + const itemWidth = width * 0.82 > 375 ? 375 : width * 0.82; + const sliderHeight = 190; + + const onLayout = () => setLoading(false); + + return ( + <> + {loading && ( + + + + )} + + + ); +}); + +WalletsCarousel.propTypes = { + vertical: PropTypes.bool, + selectedWallet: PropTypes.object, + onPress: PropTypes.func.isRequired, + handleLongPress: PropTypes.func.isRequired, +}; + +export default WalletsCarousel; diff --git a/loc/en.json b/loc/en.json index e9bb42444..b310e1bf9 100644 --- a/loc/en.json +++ b/loc/en.json @@ -363,8 +363,7 @@ "import_title": "import", "list_create_a_button": "Add now", "list_create_a_wallet": "Add a wallet", - "list_create_a_wallet1": "It's free and you can create", - "list_create_a_wallet2": "as many as you like", + "list_create_a_wallet_text": "It's free and you can create \nas many as you like", "list_empty_txs1": "Your transactions will appear here", "list_empty_txs1_lightning": "Lightning wallet should be used for your daily transactions. Fees are unfairly cheap and speed is blazing fast.", "list_empty_txs2": "Start with your wallet", diff --git a/screen/wallets/drawerList.js b/screen/wallets/drawerList.js index 522a06864..40ed17f6d 100644 --- a/screen/wallets/drawerList.js +++ b/screen/wallets/drawerList.js @@ -1,7 +1,8 @@ import React, { useRef } from 'react'; import { StatusBar, View, TouchableOpacity, StyleSheet, Alert, useWindowDimensions } from 'react-native'; import { DrawerContentScrollView } from '@react-navigation/drawer'; -import { WalletsCarousel, BlueNavigationStyle, BlueHeaderDefaultMain } from '../../BlueComponents'; +import { BlueNavigationStyle, BlueHeaderDefaultMain } from '../../BlueComponents'; +import WalletsCarousel from '../../components/WalletsCarousel'; import { Icon } from 'react-native-elements'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; import PropTypes from 'prop-types'; diff --git a/screen/wallets/list.js b/screen/wallets/list.js index b45c958f0..0f86fdbb0 100644 --- a/screen/wallets/list.js +++ b/screen/wallets/list.js @@ -13,7 +13,8 @@ import { Dimensions, useWindowDimensions, } from 'react-native'; -import { WalletsCarousel, BlueHeaderDefaultMain, BlueTransactionListItem } from '../../BlueComponents'; +import { BlueHeaderDefaultMain, BlueTransactionListItem } from '../../BlueComponents'; +import WalletsCarousel from '../../components/WalletsCarousel'; import { Icon } from 'react-native-elements'; import DeeplinkSchemaMatch from '../../class/deeplink-schema-match'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback';