1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00

Fix chainId display in network form on save

This commit is contained in:
Erik Marks 2020-11-10 22:41:19 -08:00
parent 552ea136b7
commit 4db9c8b36f

View File

@ -35,7 +35,7 @@ export default class NetworkForm extends PureComponent {
state = { state = {
rpcUrl: this.props.rpcUrl, rpcUrl: this.props.rpcUrl,
chainId: this.getDisplayChainIdFromProps(), chainId: this.getDisplayChainId(this.props.chainId),
ticker: this.props.ticker, ticker: this.props.ticker,
networkName: this.props.networkName, networkName: this.props.networkName,
blockExplorerUrl: this.props.blockExplorerUrl, blockExplorerUrl: this.props.blockExplorerUrl,
@ -49,6 +49,7 @@ export default class NetworkForm extends PureComponent {
} = prevProps } = prevProps
const { const {
rpcUrl, rpcUrl,
chainId,
ticker, ticker,
networkName, networkName,
networksTabIsInAddMode, networksTabIsInAddMode,
@ -67,7 +68,7 @@ export default class NetworkForm extends PureComponent {
} else if (prevRpcUrl !== rpcUrl) { } else if (prevRpcUrl !== rpcUrl) {
this.setState({ this.setState({
rpcUrl, rpcUrl,
chainId: this.getDisplayChainIdFromProps(), chainId: this.getDisplayChainId(chainId),
ticker, ticker,
networkName, networkName,
blockExplorerUrl, blockExplorerUrl,
@ -93,11 +94,17 @@ export default class NetworkForm extends PureComponent {
} }
resetForm() { resetForm() {
const { rpcUrl, ticker, networkName, blockExplorerUrl } = this.props const {
rpcUrl,
chainId,
ticker,
networkName,
blockExplorerUrl,
} = this.props
this.setState({ this.setState({
rpcUrl, rpcUrl,
chainId: this.getDisplayChainIdFromProps(), chainId: this.getDisplayChainId(chainId),
ticker, ticker,
networkName, networkName,
blockExplorerUrl, blockExplorerUrl,
@ -106,25 +113,21 @@ export default class NetworkForm extends PureComponent {
} }
/** /**
* Ensures that the chainId is always displayed in decimal, even though * Attempts to convert the given chainId to a decimal string, for display
* it's stored in hexadecimal. * purposes.
* *
* Should be called to get the chainId whenever props are used to set the * Should be called with the props chainId whenever it is used to set the
* component's state. * component's state.
* *
* @returns {string} The props chainId in decimal. * @param {unknown} chainId - The chainId to convert.
* @returns {string} The props chainId in decimal, or the original value if
* it can't be converted.
*/ */
getDisplayChainIdFromProps() { getDisplayChainId(chainId) {
const { chainId: propsChainId } = this.props if (!chainId || typeof chainId !== 'string' || !chainId.startsWith('0x')) {
return chainId
if (
!propsChainId ||
typeof propsChainId !== 'string' ||
!propsChainId.startsWith('0x')
) {
return propsChainId
} }
return new BigNumber(propsChainId, 16).toString(10) return new BigNumber(chainId, 16).toString(10)
} }
onSubmit = async () => { onSubmit = async () => {
@ -157,22 +160,18 @@ export default class NetworkForm extends PureComponent {
if (propsRpcUrl && rpcUrl !== propsRpcUrl) { if (propsRpcUrl && rpcUrl !== propsRpcUrl) {
await editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, { await editRpc(propsRpcUrl, rpcUrl, chainId, ticker, networkName, {
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
...rpcPrefs, ...rpcPrefs,
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
}) })
} else { } else {
await setRpcTarget(rpcUrl, chainId, ticker, networkName, { await setRpcTarget(rpcUrl, chainId, ticker, networkName, {
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
...rpcPrefs, ...rpcPrefs,
blockExplorerUrl: blockExplorerUrl || rpcPrefs.blockExplorerUrl,
}) })
} }
if (networksTabIsInAddMode) { if (networksTabIsInAddMode) {
onClear() onClear()
} else {
this.setState({
chainId: this.getDisplayChainIdFromProps(),
})
} }
} }
@ -220,7 +219,7 @@ export default class NetworkForm extends PureComponent {
const chainIdIsUnchanged = const chainIdIsUnchanged =
typeof propsChainId === 'string' && typeof propsChainId === 'string' &&
propsChainId.toLowerCase().startsWith('0x') && propsChainId.toLowerCase().startsWith('0x') &&
stateChainId === this.getDisplayChainIdFromProps() stateChainId === this.getDisplayChainId(propsChainId)
return ( return (
stateRpcUrl === rpcUrl && stateRpcUrl === rpcUrl &&