Add support for RPC endpoints with custom chain IDs (#5134)

4 files changed, 24 insertions, 5 deletions

diff --git a/ui/app/components/currency-input/currency-input.component.js b/ui/app/components/currency-input/currency-input.component.js
index 54cd0e1ac..0761a75c5 100644
--- a/ui/app/components/currency-input/currency-input.component.js
+++ b/ui/app/components/currency-input/currency-input.component.js
@@ -14,6 +14,7 @@ export default class CurrencyInput extends PureComponent {
   static propTypes = {
     conversionRate: PropTypes.number,
     currentCurrency: PropTypes.string,
+    nativeCurrency: PropTypes.string,
     onChange: PropTypes.func,
     onBlur: PropTypes.func,
     suffix: PropTypes.string,
@@ -77,13 +78,13 @@ export default class CurrencyInput extends PureComponent {
   }
 
   renderConversionComponent () {
-    const { useFiat, currentCurrency } = this.props
+    const { useFiat, currentCurrency, nativeCurrency } = this.props
     const { hexValue } = this.state
     let currency, numberOfDecimals
 
     if (useFiat) {
       // Display ETH
-      currency = ETH
+      currency = nativeCurrency || ETH
       numberOfDecimals = 6
     } else {
       // Display Fiat
diff --git a/ui/app/components/currency-input/currency-input.container.js b/ui/app/components/currency-input/currency-input.container.js
index 18e5533de..1d1ed7b41 100644
--- a/ui/app/components/currency-input/currency-input.container.js
+++ b/ui/app/components/currency-input/currency-input.container.js
@@ -3,18 +3,19 @@ import CurrencyInput from './currency-input.component'
 import { ETH } from '../../constants/common'
 
 const mapStateToProps = state => {
-  const { metamask: { currentCurrency, conversionRate } } = state
+  const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
 
   return {
+    nativeCurrency,
     currentCurrency,
     conversionRate,
   }
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { currentCurrency } = stateProps
+  const { nativeCurrency, currentCurrency } = stateProps
   const { useFiat } = ownProps
-  const suffix = useFiat ? currentCurrency.toUpperCase() : ETH
+  const suffix = useFiat ? currentCurrency.toUpperCase() : nativeCurrency || ETH
 
   return {
     ...stateProps,
diff --git a/ui/app/components/currency-input/tests/currency-input.component.test.js b/ui/app/components/currency-input/tests/currency-input.component.test.js
index 5db53066f..a33889f94 100644
--- a/ui/app/components/currency-input/tests/currency-input.component.test.js
+++ b/ui/app/components/currency-input/tests/currency-input.component.test.js
@@ -22,6 +22,7 @@ describe('CurrencyInput Component', () => {
     it('should render properly with a suffix', () => {
       const mockStore = {
         metamask: {
+          nativeCurrency: 'ETH',
           currentCurrency: 'usd',
           conversionRate: 231.06,
         },
@@ -32,6 +33,7 @@ describe('CurrencyInput Component', () => {
         <Provider store={store}>
           <CurrencyInput
             suffix="ETH"
+            nativeCurrency="ETH"
           />
         </Provider>
       )
@@ -45,6 +47,7 @@ describe('CurrencyInput Component', () => {
     it('should render properly with an ETH value', () => {
       const mockStore = {
         metamask: {
+          nativeCurrency: 'ETH',
           currentCurrency: 'usd',
           conversionRate: 231.06,
         },
@@ -56,6 +59,7 @@ describe('CurrencyInput Component', () => {
           <CurrencyInput
             value="de0b6b3a7640000"
             suffix="ETH"
+            nativeCurrency="ETH"
             currentCurrency="usd"
             conversionRate={231.06}
           />
@@ -75,6 +79,7 @@ describe('CurrencyInput Component', () => {
     it('should render properly with a fiat value', () => {
       const mockStore = {
         metamask: {
+          nativeCurrency: 'ETH',
           currentCurrency: 'usd',
           conversionRate: 231.06,
         },
@@ -87,6 +92,7 @@ describe('CurrencyInput Component', () => {
             value="f602f2234d0ea"
             suffix="USD"
             useFiat
+            nativeCurrency="ETH"
             currentCurrency="usd"
             conversionRate={231.06}
           />
@@ -116,6 +122,7 @@ describe('CurrencyInput Component', () => {
     it('should call onChange and onBlur on input changes with the hex value for ETH', () => {
       const mockStore = {
         metamask: {
+          nativeCurrency: 'ETH',
           currentCurrency: 'usd',
           conversionRate: 231.06,
         },
@@ -127,6 +134,7 @@ describe('CurrencyInput Component', () => {
             onChange={handleChangeSpy}
             onBlur={handleBlurSpy}
             suffix="ETH"
+            nativeCurrency="ETH"
             currentCurrency="usd"
             conversionRate={231.06}
           />
@@ -160,6 +168,7 @@ describe('CurrencyInput Component', () => {
     it('should call onChange and onBlur on input changes with the hex value for fiat', () => {
       const mockStore = {
         metamask: {
+          nativeCurrency: 'ETH',
           currentCurrency: 'usd',
           conversionRate: 231.06,
         },
@@ -171,6 +180,7 @@ describe('CurrencyInput Component', () => {
             onChange={handleChangeSpy}
             onBlur={handleBlurSpy}
             suffix="USD"
+            nativeCurrency="ETH"
             currentCurrency="usd"
             conversionRate={231.06}
             useFiat
@@ -205,6 +215,7 @@ describe('CurrencyInput Component', () => {
     it('should change the state and pass in a new decimalValue when props.value changes', () => {
       const mockStore = {
         metamask: {
+          nativeCurrency: 'ETH',
           currentCurrency: 'usd',
           conversionRate: 231.06,
         },
@@ -216,6 +227,7 @@ describe('CurrencyInput Component', () => {
             onChange={handleChangeSpy}
             onBlur={handleBlurSpy}
             suffix="USD"
+            nativeCurrency="ETH"
             currentCurrency="usd"
             conversionRate={231.06}
             useFiat
diff --git a/ui/app/components/currency-input/tests/currency-input.container.test.js b/ui/app/components/currency-input/tests/currency-input.container.test.js
index e77945e4d..5d72958e6 100644
--- a/ui/app/components/currency-input/tests/currency-input.container.test.js
+++ b/ui/app/components/currency-input/tests/currency-input.container.test.js
@@ -20,12 +20,14 @@ describe('CurrencyInput container', () => {
         metamask: {
           conversionRate: 280.45,
           currentCurrency: 'usd',
+          nativeCurrency: 'ETH',
         },
       }
 
       assert.deepEqual(mapStateToProps(mockState), {
         conversionRate: 280.45,
         currentCurrency: 'usd',
+        nativeCurrency: 'ETH',
       })
     })
   })
@@ -35,12 +37,14 @@ describe('CurrencyInput container', () => {
       const mockStateProps = {
         conversionRate: 280.45,
         currentCurrency: 'usd',
+        nativeCurrency: 'ETH',
       }
       const mockDispatchProps = {}
 
       assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, { useFiat: true }), {
         conversionRate: 280.45,
         currentCurrency: 'usd',
+        nativeCurrency: 'ETH',
         useFiat: true,
         suffix: 'USD',
       })
@@ -48,6 +52,7 @@ describe('CurrencyInput container', () => {
       assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, {}), {
         conversionRate: 280.45,
         currentCurrency: 'usd',
+        nativeCurrency: 'ETH',
         suffix: 'ETH',
       })
     })