TW-1362: Fix app crash after switch to T4L3NT

src/components/icon-title-no-bg/icon-title-no-bg.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Text } from 'react-native';
+import { StyleProp, Text, TextStyle } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { TestIdProps } from 'src/interfaces/test-id.props';
@@ -12,16 +12,17 @@ import { useIconTitleNoBgStyles } from './icon-title-no-bg.styles';
 interface Props extends TestIdProps {
   text: string;
   icon: IconNameEnum;
+  textStyle?: StyleProp<TextStyle>;
   onPress: EmptyFn;
 }
 
-export const IconTitleNoBg: FC<Props> = ({ text, icon, onPress, testID }) => {
+export const IconTitleNoBg: FC<Props> = ({ text, icon, textStyle, onPress, testID }) => {
   const styles = useIconTitleNoBgStyles();
 
   return (
     <TouchableOpacity style={styles.touchableOpacity} onPress={onPress} testID={testID}>
       <Icon name={icon} />
-      <Text style={styles.text}>{text}</Text>
+      <Text style={[styles.text, textStyle]}>{text}</Text>
     </TouchableOpacity>
   );
 };

src/components/styled-radio-group/index.tsx

@@ -16,9 +16,17 @@ interface Props<T extends string> extends StyledRadioGroupProps<T>, TestIdProps
   value: T;
   onChange: (value: T) => void;
   labelStyle?: ViewStyle;
+  disabledLabelStyle?: ViewStyle;
 }
 
-export const StyledRadioGroup = <T extends string>({ value, items, onChange, labelStyle, testID }: Props<T>) => {
+export const StyledRadioGroup = <T extends string>({
+  value,
+  items,
+  onChange,
+  disabledLabelStyle,
+  labelStyle,
+  testID
+}: Props<T>) => {
   const colors = useColors();
   const styles = useStyledRadioButtonsGroupStyles();
 
@@ -29,8 +37,10 @@ export const StyledRadioGroup = <T extends string>({ value, items, onChange, lab
         value={value}
         onPress={onChange}
         color={colors.orange}
+        disabledColor={colors.disabled}
         itemContainerStyle={styles.itemContainer}
         itemLabelStyle={[styles.label, labelStyle]}
+        disabledItemLabelStyle={[styles.label, disabledLabelStyle ?? styles.disabledLabel]}
         testID={testID}
       />
     </View>

src/components/styled-radio-group/radio-group/radio-group.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 
+import { showWarningToast } from 'src/toast/toast.utils';
 import { AnalyticsEventCategory } from 'src/utils/analytics/analytics-event.enum';
 import { useAnalytics } from 'src/utils/analytics/use-analytics.hook';
+import { isDefined } from 'src/utils/is-defined';
 
 import { RadioItem } from './radio-item';
 import { groupStyles } from './styles';
@@ -12,7 +14,9 @@ export const RadioGroup = <T extends string>({
   items,
   value: currentValue,
   color = '#444',
+  disabledColor = '#ccc',
   itemContainerStyle,
+  disabledItemLabelStyle: disabledLabelStyle,
   itemLabelStyle,
   onPress,
   testID
@@ -31,18 +35,24 @@ export const RadioGroup = <T extends string>({
       key: item.value,
       ...item,
       selected: item.value === currentValue,
-      onPress: handlePress
+      onPress: (value: string) =>
+        isDefined(item.disabledMessage) ? showWarningToast({ description: item.disabledMessage }) : handlePress(value)
     }));
   }, [items, currentValue, trackEvent, testID]);
 
+  const totalDisabledLabelStyle = useMemo(
+    () => [itemLabelStyle, disabledLabelStyle].flat(),
+    [itemLabelStyle, disabledLabelStyle]
+  );
+
   return (
     <View style={groupStyles.container}>
       {itemsLocal.map(item => (
         <RadioItem
           {...item}
-          color={color}
+          color={isDefined(item.disabledMessage) ? disabledColor : color}
           containerStyle={itemContainerStyle}
-          labelStyle={itemLabelStyle}
+          labelStyle={isDefined(item.disabledMessage) ? totalDisabledLabelStyle : itemLabelStyle}
           testID={testID}
         />
       ))}

src/components/styled-radio-group/radio-group/types.ts

@@ -10,6 +10,8 @@ export interface RadioItemInterface<T extends string> {
   value: T;
   label?: string;
   buttons?: ItemButtonInterface[];
+  /** If specified, the item cannot be selected but this message is displayed on an attempt to select the item */
+  disabledMessage?: string;
 }
 
 export interface RadioItemProps extends RadioItemInterface<string>, TestIdProps {
@@ -24,7 +26,9 @@ export interface RadioGroupProps<T extends string> extends TestIdProps {
   items: RadioItemInterface<T>[];
   value?: T;
   color?: string;
+  disabledColor?: string;
   itemContainerStyle?: StyleType;
+  disabledItemLabelStyle?: StyleType;
   itemLabelStyle?: StyleType;
   onPress: (value: T) => void;
 }

src/components/styled-radio-group/styles.ts

@@ -16,5 +16,10 @@ export const useStyledRadioButtonsGroupStyles = createUseStyles(({ colors, typog
     ...typography.body15Semibold,
     color: colors.black,
     flex: 1
+  },
+  disabledLabel: {
+    ...typography.body15Semibold,
+    color: colors.disabled,
+    flex: 1
   }
 }));

src/modals/custom-rpc-modals/edit-modal/edit-modal.tsx

@@ -28,6 +28,7 @@ import { useAnalytics, usePageAnalytic } from 'src/utils/analytics/use-analytics
 import { formInitialValues, formValidationSchema, confirmUniqueRPC } from '../form.utils';
 
 import { EditModalSelectors } from './edit-modal.selectors';
+import { useEditModalStyles } from './styles';
 
 export const EditCustomRpcModal: FC = () => {
   const { url } = useRoute<RouteProp<ModalsParamList, ModalsEnum.EditCustomRpc>>().params;
@@ -36,6 +37,7 @@ export const EditCustomRpcModal: FC = () => {
   const { goBack } = useNavigation();
   const { trackEvent } = useAnalytics();
   const rpcList = useRpcListSelector();
+  const styles = useEditModalStyles();
 
   const initialValues = useMemo(() => {
     const rpc = rpcList.find(rpc => rpc.url === url);
@@ -105,6 +107,7 @@ export const EditCustomRpcModal: FC = () => {
             <IconTitleNoBg
               icon={IconNameEnum.Trash}
               text="Delete RPC"
+              textStyle={styles.destructive}
               onPress={onDeleteButtonPress}
               testID={EditModalSelectors.deleteRpcButton}
             />

src/modals/custom-rpc-modals/edit-modal/styles.ts

@@ -0,0 +1,7 @@
+import { createUseStylesMemoized } from 'src/styles/create-use-styles';
+
+export const useEditModalStyles = createUseStylesMemoized(({ colors }) => ({
+  destructive: {
+    color: colors.destructive
+  }
+}));

src/screens/node-settings/node-settings.tsx

@@ -14,6 +14,7 @@ import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
 import { setSelectedRpcUrl } from 'src/store/settings/settings-actions';
 import { useRpcListSelector, useSelectedRpcUrlSelector } from 'src/store/settings/settings-selectors';
 import { usePageAnalytic } from 'src/utils/analytics/use-analytics.hook';
+import { isDcpNode } from 'src/utils/network.utils';
 import { TEMPLE_RPC } from 'src/utils/rpc/rpc-list';
 
 import { NodeSettingsSelectors } from './node-settings.selectors';
@@ -34,10 +35,11 @@ export const NodeSettings = () => {
           {
             key: 'edit',
             iconName: IconNameEnum.Edit,
-            disabled: rpc.url === TEMPLE_RPC.url ? true : undefined,
+            disabled: rpc.url === TEMPLE_RPC.url || isDcpNode(rpc.url) ? true : undefined,
             onPress: () => void navigate(ModalsEnum.EditCustomRpc, { url: rpc.url })
           }
-        ]
+        ],
+        disabledMessage: isDcpNode(rpc.url) ? 'The T4L3NT Mainnet RPC is temporarily unavailable.' : undefined
       })),
     [rpcList]
   );