-
-
Notifications
You must be signed in to change notification settings - Fork 146
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Currency Converter #1968
Currency Converter #1968
Changes from 10 commits
d55c28f
50887dd
b7e8edd
3113f3b
d9573f2
15d5f8b
b4d7618
5daa530
b50b4f2
94d9b46
7e2e94a
160b88a
12954a3
9b8d2e7
955c0a7
e207327
d7bdebc
6d05a81
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
shubhamkmr04 marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,156 @@ | ||
import * as React from 'react'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we really need this file or can we add in the functionality to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm, I'll figure out if we can without messing it up There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have added this functionality in |
||
import { SearchBar } from 'react-native-elements'; | ||
|
||
import Screen from '../../components/Screen'; | ||
import Header from '../../components/Header'; | ||
import { themeColor } from '../../utils/ThemeUtils'; | ||
|
||
import { FlatList, Text, TouchableOpacity, View } from 'react-native'; | ||
|
||
import { CURRENCY_KEYS } from '../../stores/SettingsStore'; | ||
import { localeString } from '../../utils/LocaleUtils'; | ||
|
||
import Bitcoin from '../../assets/images/SVG/bitcoin-icon.svg'; | ||
|
||
interface AddCurrenciesProps { | ||
navigation: any; | ||
} | ||
|
||
interface AddCurrenciesState { | ||
search: string; | ||
} | ||
|
||
export default class AddCurrencies extends React.Component< | ||
AddCurrenciesProps, | ||
AddCurrenciesState | ||
> { | ||
constructor(props: AddCurrenciesProps) { | ||
super(props); | ||
this.state = { | ||
search: '' | ||
}; | ||
} | ||
|
||
updateSearch = (query: string) => { | ||
this.setState({ search: query }); | ||
}; | ||
|
||
renderSeparator = () => ( | ||
<View | ||
style={{ | ||
height: 1, | ||
backgroundColor: themeColor('separator') | ||
}} | ||
/> | ||
); | ||
|
||
render() { | ||
const { navigation } = this.props; | ||
|
||
const updatedCurrencyList = [ | ||
{ | ||
key: 'Bitcoin (BTC)', | ||
value: 'BTC', | ||
svg: <Bitcoin width={20} height={20} /> | ||
}, | ||
{ | ||
key: 'Satoshis (SAT)', | ||
value: 'SAT', | ||
svg: <Bitcoin width={20} height={20} /> | ||
}, | ||
...CURRENCY_KEYS | ||
]; | ||
|
||
const { search } = this.state; | ||
const filteredCurrencies = updatedCurrencyList.filter((currency) => | ||
currency.key.toLowerCase().includes(search.toLowerCase()) | ||
); | ||
|
||
return ( | ||
<Screen> | ||
<View style={{ flex: 1 }}> | ||
<Header | ||
leftComponent="Back" | ||
centerComponent={{ | ||
text: 'Add Currencies', | ||
style: { | ||
color: themeColor('text'), | ||
fontFamily: 'PPNeueMontreal-Book' | ||
} | ||
}} | ||
navigation={navigation} | ||
/> | ||
<SearchBar | ||
placeholder={localeString('general.search')} | ||
onChangeText={this.updateSearch} | ||
value={this.state.search} | ||
inputStyle={{ | ||
color: themeColor('text') | ||
}} | ||
placeholderTextColor={themeColor('secondaryText')} | ||
containerStyle={{ | ||
backgroundColor: 'transparent', | ||
borderTopWidth: 0, | ||
borderBottomWidth: 0 | ||
}} | ||
inputContainerStyle={{ | ||
borderRadius: 15, | ||
backgroundColor: themeColor('secondary') | ||
}} | ||
/> | ||
|
||
<FlatList | ||
data={filteredCurrencies} | ||
renderItem={({ item }) => ( | ||
<TouchableOpacity | ||
onPress={() => { | ||
navigation.navigate('CurrencyConverter', { | ||
selectedCurrency: item.value | ||
}); | ||
}} | ||
> | ||
<View> | ||
<View | ||
style={{ | ||
margin: 16, | ||
flex: 1, | ||
flexDirection: 'row', | ||
alignItems: 'center' | ||
}} | ||
> | ||
{['BTC', 'SAT'].includes( | ||
item.value | ||
) && ( | ||
<View | ||
style={{ | ||
marginRight: 6, | ||
paddingLeft: 1 | ||
}} | ||
> | ||
{item.svg} | ||
</View> | ||
)} | ||
<View> | ||
<Text | ||
style={{ | ||
color: themeColor('text'), | ||
fontSize: 16, | ||
fontFamily: | ||
'PPNeueMontreal-Book' | ||
}} | ||
> | ||
{item.key} | ||
</Text> | ||
</View> | ||
</View> | ||
</View> | ||
</TouchableOpacity> | ||
)} | ||
keyExtractor={(item, index) => index.toString()} | ||
ItemSeparatorComponent={this.renderSeparator} | ||
/> | ||
</View> | ||
</Screen> | ||
); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
are we using this file anymore?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not right now, but I am thinking of using it in placeholder for BTC and SAT inputs.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's add it then