Skip to content

Commit f77bd5c

Browse files
wachuneiwachunei
committed
feat(ramp): add labels to activation keys
1 parent 5e68851 commit f77bd5c

File tree

15 files changed

+799
-1262
lines changed

15 files changed

+799
-1262
lines changed

‎app/components/Nav/Main/MainNavigator.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import Drawer from '../../UI/Drawer';
4949
import RampRoutes from '../../UI/Ramp/routes';
5050
import { RampType } from '../../UI/Ramp/types';
5151
import RampSettings from '../../UI/Ramp/Views/Settings';
52-
import RampAddActivationKey from '../../UI/Ramp/Views/Settings/AddActivationKey';
52+
import RampActivationKeyForm from '../../UI/Ramp/Views/Settings/ActivationKeyForm';
5353

5454
import { colors as importedColors } from '../../../styles/common';
5555
import OrderDetails from '../../UI/Ramp/Views/OrderDetails';
@@ -245,8 +245,8 @@ const SettingsFlow = () => (
245245
/>
246246
<Stack.Screen name={Routes.RAMP.SETTINGS} component={RampSettings} />
247247
<Stack.Screen
248-
name={Routes.RAMP.ADD_ACTIVATION_KEY}
249-
component={RampAddActivationKey}
248+
name={Routes.RAMP.ACTIVATION_KEY_FORM}
249+
component={RampActivationKeyForm}
250250
/>
251251
<Stack.Screen
252252
name="ExperimentalSettings"

‎app/components/UI/Ramp/Views/Settings/ActivationKeys.tsx‎

Lines changed: 111 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { ActivityIndicator, Switch, TouchableOpacity } from 'react-native';
44

55
import { useNavigation } from '@react-navigation/native';
66
// External dependencies
7-
import BaseListItem from '../../../../Base/ListItem';
87
import Text, {
98
TextVariant,
109
TextColor,
@@ -27,19 +26,18 @@ import useActivationKeys from '../../hooks/useActivationKeys';
2726
import { useRampSDK } from '../../sdk';
2827

2928
// Internal dependencies
30-
import { createAddActivationKeyNavDetails } from './AddActivationKey';
29+
import { creatActivationKeyFormNavDetails } from './ActivationKeyForm';
3130

32-
import styles from './Settings.styles';
33-
34-
// TODO: Convert into typescript and correctly type optionals
35-
const ListItem = BaseListItem as any;
31+
import ListItem from '../../../../../component-library/components/List/ListItem';
32+
import ListItemColumn, {
33+
WidthType,
34+
} from '../../../../../component-library/components/List/ListItemColumn';
3635

3736
function ActivationKeys() {
3837
const navigation = useNavigation();
3938
const theme = useTheme();
4039
const { colors } = theme;
4140
const { isInternalBuild } = useRampSDK();
42-
const style = styles(colors);
4341

4442
const {
4543
isLoadingKeys,
@@ -52,21 +50,45 @@ function ActivationKeys() {
5250
});
5351

5452
const handleAddNewKey = useCallback(
55-
(key) => addActivationKey(key),
53+
(key: string, label: string, _active: boolean) =>
54+
addActivationKey(key, label),
5655
[addActivationKey],
5756
);
5857

58+
const handleUpdateKey = useCallback(
59+
(key: string, label: string, active: boolean) =>
60+
updateActivationKey(key, label, active),
61+
[updateActivationKey],
62+
);
63+
5964
const handleAddNewKeyPress = useCallback(() => {
6065
navigation.navigate(
61-
...createAddActivationKeyNavDetails({
66+
...creatActivationKeyFormNavDetails({
6267
onSubmit: handleAddNewKey,
68+
key: '',
69+
label: '',
70+
active: true,
6371
}),
6472
);
6573
}, [navigation, handleAddNewKey]);
6674

75+
const handleEditPress = useCallback(
76+
(key: string, label: string, active: boolean) => {
77+
navigation.navigate(
78+
...creatActivationKeyFormNavDetails({
79+
onSubmit: handleUpdateKey,
80+
key,
81+
label,
82+
active,
83+
}),
84+
);
85+
},
86+
[navigation, handleUpdateKey],
87+
);
88+
6789
return (
6890
<>
69-
<Text style={style.title}>
91+
<Text>
7092
<Text variant={TextVariant.BodyLGMedium}>
7193
{strings('app_settings.fiat_on_ramp.sdk_activation_keys')}
7294
</Text>
@@ -82,46 +104,87 @@ function ActivationKeys() {
82104
</Row>
83105
{activationKeys.map((activationKey) => (
84106
<ListItem key={activationKey.key}>
85-
<ListItem.Content>
86-
<ListItem.Icon>
87-
<Switch
88-
onValueChange={() =>
89-
updateActivationKey(activationKey.key, !activationKey.active)
107+
<ListItemColumn>
108+
<Switch
109+
onValueChange={() =>
110+
updateActivationKey(
111+
activationKey.key,
112+
activationKey.label ?? '',
113+
!activationKey.active,
114+
)
115+
}
116+
value={activationKey.active}
117+
trackColor={{
118+
true: colors.primary.default,
119+
false: colors.border.muted,
120+
}}
121+
thumbColor={theme.brandColors.white['000']}
122+
ios_backgroundColor={colors.border.muted}
123+
disabled={isLoadingKeys}
124+
/>
125+
</ListItemColumn>
126+
<ListItemColumn widthType={WidthType.Fill}>
127+
{activationKey.label ? (
128+
<Text
129+
color={
130+
activationKey.active ? TextColor.Default : TextColor.Muted
90131
}
91-
value={activationKey.active}
92-
trackColor={{
93-
true: colors.primary.default,
94-
false: colors.border.muted,
95-
}}
96-
thumbColor={theme.brandColors.white['000']}
97-
ios_backgroundColor={colors.border.muted}
98-
disabled={isLoadingKeys}
99-
/>
100-
</ListItem.Icon>
101-
<ListItem.Body>
102-
<Text color={TextColor.Muted} selectable>
103-
{activationKey.key}
104-
</Text>
105-
</ListItem.Body>
106-
<ListItem.Amounts>
107-
<TouchableOpacity
108-
accessible
109-
accessibilityRole="button"
110-
accessibilityLabel="Delete Activation Key"
111-
disabled={isLoadingKeys}
112-
onPress={() => removeActivationKey(activationKey.key)}
113-
hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
132+
selectable
114133
>
115-
<Icon
116-
name={IconName.Trash}
117-
size={IconSize.Lg}
118-
color={
119-
isLoadingKeys ? colors.error.disabled : colors.error.default
120-
}
121-
/>
122-
</TouchableOpacity>
123-
</ListItem.Amounts>
124-
</ListItem.Content>
134+
{activationKey.label}
135+
</Text>
136+
) : null}
137+
<Text
138+
color={activationKey.active ? TextColor.Default : TextColor.Muted}
139+
selectable
140+
>
141+
{activationKey.key}
142+
</Text>
143+
</ListItemColumn>
144+
<ListItemColumn>
145+
<TouchableOpacity
146+
accessible
147+
accessibilityRole="button"
148+
accessibilityLabel="Edit Activation Key"
149+
disabled={isLoadingKeys}
150+
onPress={() =>
151+
handleEditPress(
152+
activationKey.key,
153+
activationKey.label || '',
154+
activationKey.active,
155+
)
156+
}
157+
hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
158+
>
159+
<Icon
160+
name={IconName.Edit}
161+
size={IconSize.Lg}
162+
color={
163+
isLoadingKeys
164+
? colors.primary.disabled
165+
: colors.primary.default
166+
}
167+
/>
168+
</TouchableOpacity>
169+
</ListItemColumn>
170+
<ListItemColumn>
171+
<TouchableOpacity
172+
accessible
173+
accessibilityRole="button"
174+
accessibilityLabel="Delete Activation Key"
175+
disabled={isLoadingKeys}
176+
onPress={() => removeActivationKey(activationKey.key)}
177+
hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
178+
>
179+
<Icon
180+
name={IconName.Trash}
181+
size={IconSize.Lg}
182+
color={
183+
isLoadingKeys ? colors.error.disabled : colors.error.default
184+
}
185+
/>
186+
</TouchableOpacity>
187+
</ListItemColumn>
125188
</ListItem>
126189
))}
127190
<Row>

‎app/components/UI/Ramp/Views/Settings/AddActivationKey.test.tsx‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

0 commit comments

Comments
 (0)