Skip to content

Commit

Permalink
feat: improve add network fields checkers
Browse files Browse the repository at this point in the history
  • Loading branch information
@salimtb
salimtb committed Jun 26, 2024
1 parent cec666c commit 9f4befd
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 12 deletions.
9 changes: 9 additions & 0 deletions app/components/Nav/App/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ import OnboardingSuccess from '../../Views/OnboardingSuccess';
import DefaultSettings from '../../Views/OnboardingSuccess/DefaultSettings';
import BasicFunctionalityModal from '../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal';
import SmartTransactionsOptInModal from '../../Views/SmartTransactionsOptInModal/SmartTranactionsOptInModal';
import { isNetworkUiRedesignEnabled } from '../../../util/networks';

const clearStackNavigatorOptions = {
headerShown: false,
Expand Down Expand Up @@ -874,6 +875,14 @@ const App = ({ userLoggedIn }) => {
component={AddNetworkFlow}
options={{ animationEnabled: true }}
/>
{isNetworkUiRedesignEnabled ? (
<Stack.Screen
name={Routes.EDIT_NETWORK}
component={AddNetworkFlow}
options={{ animationEnabled: true }}
/>
) : null}

<Stack.Screen
name={Routes.LOCK_SCREEN}
component={LockScreen}
Expand Down
190 changes: 178 additions & 12 deletions app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,11 @@ import Routes from '../../../../../constants/navigation/Routes';
import { selectUseSafeChainsListValidation } from '../../../../../../app/selectors/preferencesController';
import withIsOriginalNativeToken from './withIsOriginalNativeToken';
import { compose } from 'redux';
import Icon, {
IconColor,
IconName,
IconSize,
} from '../../../../../component-library/components/Icons/Icon';

const createStyles = (colors) =>
StyleSheet.create({
Expand Down Expand Up @@ -143,6 +148,10 @@ const createStyles = (colors) =>
flexGrow: 1,
flexShrink: 1,
},
newWarningContainer: {
flexGrow: 1,
flexShrink: 1,
},
label: {
fontSize: 14,
paddingVertical: 12,
Expand All @@ -163,6 +172,18 @@ const createStyles = (colors) =>
color: colors.text.default,
...fontStyles.normal,
},
messageWarning: {
paddingVertical: 2,
fontSize: 14,
color: colors.warning.default,
...typography.sBodyMD,
},
suggestionButton: {
color: colors.text.default,
paddingLeft: 2,
paddingRight: 4,
marginTop: 4,
},
inlineWarning: {
paddingVertical: 2,
fontSize: 14,
Expand Down Expand Up @@ -523,11 +544,31 @@ class NetworkSettings extends PureComponent {
return true;
};

checkIfChainIdExists = async (chainId) => {
const checkCustomNetworks = Object.values(
this.props.networkConfigurations,
).filter((item) => item.chainId === toHex(chainId));

if (isNetworkUiRedesignEnabled && checkCustomNetworks.length > 0) {
return true;
}
return false;
};

checkIfNetworkExists = async (rpcUrl) => {
const checkCustomNetworks = Object.values(
this.props.networkConfigurations,
).filter((item) => item.rpcUrl === rpcUrl);

if (checkCustomNetworks.length > 0) {
if (isNetworkUiRedesignEnabled) {
this.setState({
warningRpcUrl: strings(
'app_settings.url_associated_to_another_chain_id',
),
});
return checkCustomNetworks;
}
this.setState({ warningRpcUrl: strings('app_settings.network_exists') });
return checkCustomNetworks;
}
Expand Down Expand Up @@ -689,6 +730,14 @@ class NetworkSettings extends PureComponent {
}

if (isNetworkExists.length > 0) {
if (isNetworkUiRedesignEnabled) {
return this.setState({
validatedRpcURL: false,
warningRpcUrl: strings(
'app_settings.url_associated_to_another_chain_id',
),
});
}
return this.setState({
validatedRpcURL: true,
warningRpcUrl: strings('app_settings.network_exists'),
Expand All @@ -712,8 +761,26 @@ class NetworkSettings extends PureComponent {
/**
* Validates that chain id is a valid integer number, setting a warningChainId if is invalid
*/
validateChainId = () => {
const { chainId } = this.state;
validateChainId = async () => {
const { chainId, rpcUrl, editable } = this.state;

const isChainIdExists = await this.checkIfChainIdExists(chainId);
const isNetworkExists = await this.checkIfNetworkExists(rpcUrl);

if (
isChainIdExists &&
isNetworkExists.length > 0 &&
isNetworkUiRedesignEnabled &&
!editable
) {
return this.setState({
validateChainId: false,
warningChainId: strings(
'app_settings.chain_id_associated_with_another_network',
),
});
}

if (!chainId) {
return this.setState({
warningChainId: strings('app_settings.chain_id_required'),
Expand Down Expand Up @@ -753,6 +820,29 @@ class NetworkSettings extends PureComponent {
});
}

let endpointChainId;
let providerError;
try {
endpointChainId = await jsonRpcRequest(rpcUrl, 'eth_chainId');
} catch (err) {
Logger.error(err, 'Failed to fetch the chainId from the endpoint.');
providerError = err;
}

if (providerError || typeof endpointChainId !== 'string') {
return this.setState({
validatedRpcURL: false,
warningRpcUrl: strings('app_settings.unMatched_chain'),
});
}

if (endpointChainId !== toHex(chainId)) {
return this.setState({
validatedRpcURL: false,
warningChainId: strings('app_settings.unMatched_chain_name'),
});
}

this.validateRpcAndChainId();
this.setState({ warningChainId: undefined, validatedChainId: true });
};
Expand Down Expand Up @@ -976,6 +1066,17 @@ class NetworkSettings extends PureComponent {
navigation.goBack();
};

goToNetworkEdit = () => {
const { rpcUrl } = this.state;
const { navigation } = this.props;
navigation.goBack();
navigation.navigate(Routes.EDIT_NETWORK, {
network: rpcUrl,
shouldNetworkSwitchPopToWallet: false,
shouldShowPopularNetworks: false,
});
};

showNetworkModal = (networkConfiguration) => {
this.setState({
showPopularNetworkModal: true,
Expand Down Expand Up @@ -1075,6 +1176,65 @@ class NetworkSettings extends PureComponent {
const shouldNetworkSwitchPopToWallet =
route.params?.shouldNetworkSwitchPopToWallet ?? true;

const renderWarningChainId = () => {
const CHAIN_LIST_URL = 'https://chainid.network/';
const containerStyle = isNetworkUiRedesignEnabled
? styles.newWarningContainer
: styles.warningContainer;

if (warningChainId) {
if (warningChainId === strings('app_settings.unMatched_chain_name')) {
return (
<View style={containerStyle}>
<Text style={styles.warningText}>{warningChainId}</Text>
<View>
<Text style={styles.warningText}>
{strings('app_settings.find_the_right_one')}{' '}
<Text
style={styles.link}
onPress={() => Linking.openURL(CHAIN_LIST_URL)}
>
chainid.network{' '}
<Icon
size={IconSize.Xs}
name={IconName.Export}
color={IconColor.PrimaryAlternative}
/>
</Text>
</Text>
</View>
</View>
);
}
if (
warningChainId ===
strings('app_settings.chain_id_associated_with_another_network')
) {
return (
<View style={containerStyle}>
<Text style={styles.warningText}>
{strings(
'app_settings.chain_id_associated_with_another_network',
)}{' '}
<Text
style={styles.link}
onPress={() => this.goToNetworkEdit()}
>
{strings('app_settings.edit_original_network')}
</Text>
</Text>
</View>
);
}
return (
<View style={containerStyle}>
<Text style={styles.warningText}>{warningChainId}</Text>
</View>
);
}
return null;
};

const renderWarningSymbol = () => {
const { validatedSymbol } = this.state;
if (warningSymbol) {
Expand Down Expand Up @@ -1135,7 +1295,11 @@ class NetworkSettings extends PureComponent {
<KeyboardAwareScrollView style={styles.informationCustomWrapper}>
{!networkTypeOrRpcUrl ? (
<WarningMessage
style={styles.warningContainer}
style={
isNetworkUiRedesignEnabled
? styles.newWarningContainer
: styles.warningContainer
}
warningMessage={strings('networks.malicious_network_warning')}
/>
) : null}
Expand Down Expand Up @@ -1163,17 +1327,19 @@ class NetworkSettings extends PureComponent {
/>
{warningName ? (
<View>
<Text style={styles.messageWarning}>
{strings('wallet.incorrect_network_name_warning')}
</Text>
<Text style={styles.inlineWarning}>
{strings('wallet.chain_id_currently_used')}{' '}
{strings('wallet.suggested_name')}{' '}
<Text
style={styles.link}
onPress={() => {
this.autoFillNameField(warningName);
}}
>
{warningName}
</Text>{' '}
{strings('asset_details.network').toLowerCase()}
</Text>
</Text>
</View>
) : null}
Expand All @@ -1197,7 +1363,11 @@ class NetworkSettings extends PureComponent {
/>
{warningRpcUrl && (
<View
style={styles.warningContainer}
style={
isNetworkUiRedesignEnabled
? styles.newWarningContainer
: styles.warningContainer
}
testID={NetworksViewSelectorsIDs.RPC_WARNING_BANNER}
>
<Text style={styles.warningText}>{warningRpcUrl}</Text>
Expand All @@ -1223,11 +1393,7 @@ class NetworkSettings extends PureComponent {
testID={NetworksViewSelectorsIDs.CHAIN_INPUT}
keyboardAppearance={themeAppearance}
/>
{warningChainId ? (
<View style={styles.warningContainer}>
<Text style={styles.warningText}>{warningChainId}</Text>
</View>
) : null}
{renderWarningChainId()}

<Text style={styles.label}>
{strings('app_settings.network_symbol_label')}
Expand Down
1 change: 1 addition & 0 deletions app/constants/navigation/Routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ const Routes = {
WALLET_RESET_NEEDED: 'WalletResetNeeded',
},
ADD_NETWORK: 'AddNetwork',
EDIT_NETWORK: 'EditNetwork',
SWAPS: 'Swaps',
LOCK_SCREEN: 'LockScreen',
NOTIFICATIONS: {
Expand Down
8 changes: 8 additions & 0 deletions locales/languages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,8 @@
"use_the_currency_symbol": "uses the currency symbol",
"use_correct_symbol": "Make sure you’re using the correct symbol before continuing",
"chain_id_currently_used": "This Chain ID is currently used by the",
"incorrect_network_name_warning": "According to our records, the network name may not correctly match this chain ID.",
"suggested_name": "Suggested name:",
"network_check_validation_desc": "reduces your chances of connecting to a malicious or incorrect network.",
"nfts_autodetection_cta": "Turn on NFT detection in Settings",
"learn_more": "Learn more",
Expand Down Expand Up @@ -890,6 +892,12 @@
"popular": "Popular",
"delete": "Delete",
"network_exists": "This network has already been added.",
"unMatched_chain": "According to our records, this URL does not match a known provider for this chain ID.",
"unMatched_chain_name": "This chain ID doesn’t match the network name.",
"url_associated_to_another_chain_id": "This URL is associated with another chain ID.",
"chain_id_associated_with_another_network": "The information you have entered is associated with an existing chain ID. Update your information or",
"edit_original_network": "edit the original network",
"find_the_right_one": "Find the right one on:",
"delete_metrics_title": "Delete MetaMetrics data",
"delete_metrics_description_part_one": "This will delete historical",
"delete_metrics_description_part_two": "MetaMetrics",
Expand Down

0 comments on commit 9f4befd

Please sign in to comment.