Skip to content

Commit

Permalink
Adjusting Flags
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhamkmr04
shubhamkmr04 committed Feb 13, 2024
1 parent b50b4f2 commit 8e6a711
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 86 deletions.
12 changes: 12 additions & 0 deletions assets/images/SVG/bitcoin-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 39 additions & 13 deletions views/Settings/AddCurrencies.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import Screen from '../../components/Screen';
import Header from '../../components/Header';
import { themeColor } from '../../utils/ThemeUtils';

import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { FlatList, Text, TouchableOpacity, View, Platform } from 'react-native';

Check failure on line 8 in views/Settings/AddCurrencies.tsx

View workflow job for this annotation

GitHub Actions / lint 

'Platform' is defined but never used

import { CURRENCY_KEYS } from '../../stores/SettingsStore';
import { localeString } from '../../utils/LocaleUtils';

import Bitcoin from '../../assets/images/SVG/bitcoin-icon.svg';

interface AddCurrenciesProps {
navigation: any;
}
Expand Down Expand Up @@ -47,12 +49,14 @@ export default class AddCurrencies extends React.Component<

const updatedCurrencyList = [
{
key: '฿ Bitcoin (BTC)',
value: 'BTC'
key: 'Bitcoin (BTC)',
value: 'BTC',
svg: <Bitcoin width={20} height={20} />
},
{
key: '฿ Satoshis (SAT)',
value: 'SAT'
key: 'Satoshis (SAT)',
value: 'SAT',
svg: <Bitcoin width={20} height={20} />
},
...CURRENCY_KEYS
];
Expand Down Expand Up @@ -100,23 +104,45 @@ export default class AddCurrencies extends React.Component<
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => {
// Navigate back to the CurrencyConverter view with the selected currency
navigation.navigate('CurrencyConverter', {
selectedCurrency: item.value
});
}}
>
<View>
<Text
<View
style={{
color: themeColor('text'),
fontFamily: 'PPNeueMontreal-Book',
fontSize: 16,
margin: 16
margin: 16,
flex: 1,
flexDirection: 'row',
alignItems: 'center'
}}
>
{item.key}
</Text>
{['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>
)}
Expand Down
169 changes: 96 additions & 73 deletions views/Settings/CurrencyConverter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { Row } from '../../components/layout/Row';
import { themeColor } from '../../utils/ThemeUtils';
import { localeString } from '../../utils/LocaleUtils';
import FiatStore from '../../stores/FiatStore';
import SettingsStore from '../../stores/SettingsStore';
import SettingsStore, { CURRENCY_KEYS } from '../../stores/SettingsStore';

import Add from '../../assets/images/SVG/Add.svg';
import Edit from '../../assets/images/SVG/Pen.svg';
Expand Down Expand Up @@ -50,7 +50,7 @@ export default class CurrencyConverter extends React.Component<
this.state = {
inputValues: {
BTC: '',
USD: ''
SAT: ''
},
selectedCurrency: '',
editMode: false,
Expand Down Expand Up @@ -355,8 +355,8 @@ export default class CurrencyConverter extends React.Component<
height="30"
style={{
alignSelf: 'center',
marginLeft: 10,
marginTop: -8
marginLeft: 8,
marginTop: -4
}}
/>
</TouchableOpacity>
Expand All @@ -366,11 +366,25 @@ export default class CurrencyConverter extends React.Component<
<TouchableOpacity onPress={this.toggleEditMode}>
<Edit
fill={themeColor('text')}
style={{ alignSelf: 'center', marginTop: -8 }}
style={{
alignSelf: 'center',
marginTop: -4,
marginRight: 4
}}
/>
</TouchableOpacity>
);

const getFlagEmoji = (currencyValue: string) => {
const currency = CURRENCY_KEYS.find(
(currency) => currency.value === currencyValue
);
if (currency) {
return currency.key.split(' ')[0];
}
return '';
};

const inputBoxWidth = fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [1, editMode ? 1 : 0.8]
Expand Down Expand Up @@ -433,55 +447,62 @@ export default class CurrencyConverter extends React.Component<
style={styles.inputContainer}
key={item}
>
{editMode && (
<TouchableOpacity
onPress={() =>
this.handleDeleteCurrency(
item
)
}
>
<Animated.View
style={[
styles.deleteIcon,
{
transform: [
{
translateX:
slideInLeft
}
]
}
]}
{editMode &&
item !== 'BTC' &&
item !== 'SAT' && (
<TouchableOpacity
onPress={() =>
this.handleDeleteCurrency(
item
)
}
>
<Icon
name="delete"
size={28}
color={themeColor(
'delete'
)}
/>
</Animated.View>
</TouchableOpacity>
)}
<Animated.View
style={[
styles.deleteIcon,
{
transform: [
{
translateX:
slideInLeft
}
]
}
]}
>
<Icon
name="delete"
size={28}
color={themeColor(
'delete'
)}
/>
</Animated.View>
</TouchableOpacity>
)}

<Animated.View
style={[
styles.inputBox,
{
transform: [
{
scaleX: inputBoxWidth
}
]
}
item !== 'BTC' &&
item !== 'SAT'
? {
transform: [
{
scaleX: inputBoxWidth
}
]
}
: null
]}
>
<TextInput
suffix={item}
placeholder={`${localeString(
'views.Settings.CurrencyConverter.enterAmountIn'
)} ${item}`}
)} ${item} ${getFlagEmoji(
item
)}`}
value={inputValues[item]}
onChangeText={(value) =>
this.handleInputChange(
Expand All @@ -493,37 +514,39 @@ export default class CurrencyConverter extends React.Component<
/>
</Animated.View>

{editMode && (
<TouchableOpacity
onPressIn={onDragStart}
onPressOut={onDragEnd}
accessibilityLabel={
'Reorder'
}
>
<Animated.View
style={[
styles.dragHandle,
{
transform: [
{
translateX:
slideInRight
}
]
}
]}
{editMode &&
item !== 'BTC' &&
item !== 'SAT' && (
<TouchableOpacity
onPressIn={onDragStart}
onPressOut={onDragEnd}
accessibilityLabel={
'Reorder'
}
>
<DragDots
fill={themeColor(
'text'
)}
width="30"
height="30"
/>
</Animated.View>
</TouchableOpacity>
)}
<Animated.View
style={[
styles.dragHandle,
{
transform: [
{
translateX:
slideInRight
}
]
}
]}
>
<DragDots
fill={themeColor(
'text'
)}
width="30"
height="30"
/>
</Animated.View>
</TouchableOpacity>
)}
</View>
</View>
);
Expand Down

0 comments on commit 8e6a711

Please sign in to comment.