Switch chains, standardize chain id as number (#592)

Co-authored-by: Matt Holtzman <matt.holtzman@gmail.com>
floating · Oct 11, 2021 · a42cd43 · a42cd43
1 parent 68a1a1f
commit a42cd43
Show file tree

Hide file tree

Showing 23 changed files with 4,018 additions and 4,225 deletions.
diff --git a/app/App/Panel/Main/Account/Requests/ChainRequest/index.js b/app/App/Panel/Main/Account/Requests/ChainRequest/index.js
@@ -15,6 +15,7 @@ class ChainRequest extends React.Component {
   render () {
     const status = this.props.req.status
     const notice = this.props.req.notice
+    const type = this.props.req.type
     let requestClass = 'signerRequest'
     if (status === 'success') requestClass += ' signerRequestSuccess'
     if (status === 'declined') requestClass += ' signerRequestDeclined'
@@ -50,36 +51,64 @@ class ChainRequest extends React.Component {
             </div>
           ) : (
             <div className='approveTransactionPayload'>
-              <div className='approveRequestHeader approveTransactionHeader'>
-                <div className='approveRequestHeaderIcon'> {svg.octicon('shield', { height: 20 })}</div>
-                <div className='approveRequestHeaderLabel'> Add Chain</div>
-              </div>
+              {type === 'switchChain' ? ( 
+                <div className='approveRequestHeader approveTransactionHeader'>
+                  <div className='approveRequestHeaderIcon'> {svg.octicon('shield', { height: 20 })}</div>
+                  <div className='approveRequestHeaderLabel'> Switch Chain</div>
+                </div>
+              ) : (
+                <div className='approveRequestHeader approveTransactionHeader'>
+                  <div className='approveRequestHeaderIcon'> {svg.octicon('shield', { height: 20 })}</div>
+                  <div className='approveRequestHeaderLabel'> Add Chain</div>
+                </div>
+              )}
               <div className='requestChain scaleIn'>
                 <div className='requestChainInner'>
                   <div className={originClass}>{this.props.req.origin}</div>
-                  <div className={'requestChainOriginSub'}>{'wants to add chain'}</div>
-                  <div className='requestChainName'>{chain.name}</div>
+                  <div className={'requestChainOriginSub'}>{type === 'switchChain' ? 'wants to switch to chain' : 'wants to add chain'}</div>
+                  <div className='requestChainName'>{type === 'switchChain' ? (
+                    this.store('main.networks', chain.type, parseInt(chain.id), 'name')
+                  ) : chain.name}</div>
                 </div>
               </div>
             </div>
           )}
         </div>
-        <div className='requestApprove'>
-          <div 
-            className='requestDecline' 
-            style={{ pointerEvents: this.state.allowInput && this.props.onTop ? 'auto' : 'none'}}
-            onClick={() => { if (this.state.allowInput && this.props.onTop) link.send('tray:addChain', false, this.props.req) 
-          }}>
-            <div className='requestDeclineButton _txButton _txButtonBad'>Decline</div>
+        {type === 'switchChain' ? (
+          <div className='requestApprove'>
+            <div 
+              className='requestDecline' 
+              style={{ pointerEvents: this.state.allowInput && this.props.onTop ? 'auto' : 'none'}}
+              onClick={() => { if (this.state.allowInput && this.props.onTop) link.send('tray:switchChain', false, false, this.props.req) 
+            }}>
+              <div className='requestDeclineButton _txButton _txButtonBad'>Decline</div>
+            </div>
+            <div 
+              className='requestSign' 
+              style={{ pointerEvents: this.state.allowInput && this.props.onTop ? 'auto' : 'none'}}
+              onClick={() => { if (this.state.allowInput && this.props.onTop) link.send('tray:switchChain', chain.type, parseInt(chain.id), this.props.req)
+            }}>
+              <div className='requestSignButton _txButton'>Switch</div>
+            </div>
           </div>
-          <div 
-            className='requestSign' 
-            style={{ pointerEvents: this.state.allowInput && this.props.onTop ? 'auto' : 'none'}}
-            onClick={() => { if (this.state.allowInput && this.props.onTop) this.store.notify('addChain', this.props.req) 
-          }}>
-            <div className='requestSignButton _txButton'>Review</div>
+        ) : (
+          <div className='requestApprove'>
+            <div 
+              className='requestDecline' 
+              style={{ pointerEvents: this.state.allowInput && this.props.onTop ? 'auto' : 'none'}}
+              onClick={() => { if (this.state.allowInput && this.props.onTop) link.send('tray:addChain', false, this.props.req) 
+            }}>
+              <div className='requestDeclineButton _txButton _txButtonBad'>Decline</div>
+            </div>
+            <div 
+              className='requestSign' 
+              style={{ pointerEvents: this.state.allowInput && this.props.onTop ? 'auto' : 'none'}}
+              onClick={() => { if (this.state.allowInput && this.props.onTop) this.store.notify('addChain', this.props.req) 
+            }}>
+              <div className='requestSignButton _txButton'>Review</div>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     )
   }

diff --git a/app/App/Panel/Main/Account/Requests/TransactionRequest/TxFeeNew/index.js b/app/App/Panel/Main/Account/Requests/TransactionRequest/TxFeeNew/index.js
@@ -11,7 +11,7 @@ class TxFee extends React.Component {
     super(props, context)
     this.chain = { 
       type: 'ethereum', 
-      id: parseInt(props.req.data.chainId, 'hex').toString()
+      id: parseInt(props.req.data.chainId, 'hex')
     }
   }
   toDisplayUSD (bn) {

diff --git a/app/App/Panel/Main/Account/Requests/TransactionRequest/index.js b/app/App/Panel/Main/Account/Requests/TransactionRequest/index.js
@@ -71,7 +71,7 @@ class TransactionRequest extends React.Component {
     super(props, context)
     this.chain = { 
       type: 'ethereum', 
-      id: parseInt(props.req.data.chainId, 'hex').toString()
+      id: parseInt(props.req.data.chainId, 'hex')
     }
     this.state = { allowInput: false, dataView: false }
     setTimeout(() => {

diff --git a/app/App/Panel/Main/Account/Requests/index.js b/app/App/Panel/Main/Account/Requests/index.js
@@ -146,7 +146,7 @@ class Requests extends React.Component {
               if (req.type === 'access') return <ProviderRequest key={req.handlerId} req={req} pos={pos} z={z} onTop={i === normal.length - 1} />
               if (req.type === 'sign') return <SignatureRequest key={req.handlerId} req={req} pos={pos} z={z} onTop={i === normal.length - 1} />
               if (req.type === 'signTypedData') return <SignTypedDataRequest key={req.handlerId} req={req} pos={pos} z={z} onTop={i === normal.length - 1} />
-              if (req.type === 'addChain') return <ChainRequest key={req.handlerId} req={req} pos={pos} z={z} onTop={i === normal.length - 1} />
+              if (req.type === 'addChain' || req.type === 'switchChain') return <ChainRequest key={req.handlerId} req={req} pos={pos} z={z} onTop={i === normal.length - 1} />
               return null
             })}
           </div>

diff --git a/app/App/Panel/Main/Account/SignerStatus/index.js b/app/App/Panel/Main/Account/SignerStatus/index.js
@@ -21,30 +21,6 @@ class SignerStatus extends React.Component {
     this.inputRef = React.createRef()
   }
 
-  // clickListener (event) {
-  //   console.log('found a clikc')
-  //   const statusRef = ReactDOM.findDOMNode(this.statusRef.current)
-  //   if (statusRef && statusRef.contains(event.target)) {
-  //     console.log('inside statu ref')
-  //     this.setState({ hideStatus: false })
-  //   } else  {
-  //     console.log('outside statu ref')
-  //     this.setState({ hideStatus: true })
-  //   }
-  //   // if (!element.contains(event.target)) { // or use: event.target.closest(selector) === null
-  //   //   element.style.display = 'none'
-  //   //   removeClickListener()
-  //   // }
-  // }
-
-  // componentDidMount () {
-  //   document.addEventListener('mousedown', this.clickListener.bind(this))
-  // } 
-
-  // componentWillUnmount () {
-  //   document.removeEventListener('mousedown', this.clickListener.bind(this))
-  // }
-
   shake () {
     this.setState({ shake: true })
     setTimeout(() => {

diff --git a/app/App/Panel/Main/Account/index.js b/app/App/Panel/Main/Account/index.js
@@ -289,7 +289,7 @@ class _AccountMain extends React.Component {
     const chainId = this.store('main.currentNetwork.id')
     let slideHeight = 0
     const modules = accountModuleOrder.map((id, i) => {
-      if (chainId !== '1' && id === 'inventory') return undefined
+      if (chainId !== 1 && id === 'inventory') return undefined
       const module = accountModules[id] || { height: 0 }
       slideHeight += module.height + 5
       return this.renderModule(id, module, slideHeight - module.height - 5, i, id => {

diff --git a/app/App/Panel/Main/Signer/index.js b/app/App/Panel/Main/Signer/index.js
@@ -32,7 +32,7 @@ class _Balances extends React.Component {
 
   setActive (active) {
     const { type, id } = this.store('main.currentNetwork')
-    if (type !== 'ethereum' || id !== '1') return
+    if (type !== 'ethereum' || id !== 1) return
     this.setState({ openActive: active })
     this.openTimer = setTimeout(() => this.setState({ open: active }), 480)
     if (active && !this.state.openActive) {

diff --git a/app/App/Panel/Networks/index.js b/app/App/Panel/Networks/index.js
@@ -186,7 +186,7 @@ class _Network extends React.Component {
               }}
             />
           </div>
-          {this.props.id === '1' ? (
+          {this.props.id === 1 ? (
             <div className='mainnetToggleLock'>{svg.lock(9)}</div>
           ) : (
             <div className={this.props.on ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle'} onMouseDown={() => {
@@ -295,7 +295,7 @@ class _Network extends React.Component {
                 className='chainIdInput'
                 value={this.state.id} spellCheck='false'
                 onChange={(e) => {
-                  if (type === 'ethereum' && id === '1') return
+                  if (type === 'ethereum' && id === 1) return
                   this.setState({ id: e.target.value })
                 }}
                 onBlur={(e) => {
@@ -306,7 +306,7 @@ class _Network extends React.Component {
                 className='chainSymbolInput'
                 value={this.state.symbol} spellCheck='false'
                 onChange={(e) => {
-                  if (type === 'ethereum' && id === '1') return
+                  if (type === 'ethereum' && id === 1) return
                   if (e.target.value.length > 8) return e.preventDefault()
                   this.setState({ symbol: e.target.value })
                 }}
@@ -317,7 +317,7 @@ class _Network extends React.Component {
               <Dropdown
                 syncValue={this.state.layer}
                 onChange={layer => this.setState({ layer })}
-                options={type === 'ethereum' && id === '1' ? [
+                options={type === 'ethereum' && id === 1 ? [
                   { text: 'mainnet', value: 'mainnet'}
                 ] : [
                   { text: 'rollup', value: 'rollup'}, 
@@ -343,7 +343,7 @@ class _Network extends React.Component {
         ) : null}
 
         {this.state.showControls ? (
-          type === 'ethereum' && id === '1' ? (
+          type === 'ethereum' && id === 1 ? (
             <div className='chainMore cardShow'>
               <div className='moduleButton moduleButtonLocked'>
                 {svg.lock(11)}

diff --git a/app/App/Panel/Notify/AddChain/index.js b/app/App/Panel/Notify/AddChain/index.js
@@ -16,13 +16,18 @@ class AddChain extends React.Component {
     this.newNetworkLayer = ''
     this.req = props.req
     this.chain = (this.req && this.req.chain) || {}
+
+    const blockExplorerUrls = this.chain.blockExplorerUrls || []
+    const rpcUrls = this.chain.rpcUrls || []
+    const nativeChainCurrency = this.chain.nativeCurrency || {}
+
     this.state = {
       newNetworkId: parseInt(this.chain.id, 'hex') || this.newNetworkIdDefault,
       newNetworkName: this.chain.name || this.newNetworkNameDefault,
-      newNetworkExplorer: this.chain.explorer || this.newNetworkExplorerDefault,
-      newNetworkRPCPrimary: this.chain.rpcUrl || this.newNetworkRPCPrimary,
-      newNetworkRPCSecondary: this.newNetworkRPCSecondary,
-      newNetworkSymbol: this.chain.symbol || this.newNetworkSymbolDefault,
+      newNetworkExplorer: blockExplorerUrls[0] || this.newNetworkExplorerDefault,
+      newNetworkRPCPrimary: rpcUrls[0] || this.newNetworkRPCPrimary,
+      newNetworkRPCSecondary: rpcUrls[1] || this.newNetworkRPCSecondary,
+      newNetworkSymbol: nativeChainCurrency.symbol || this.newNetworkSymbolDefault,
       newNetworkType: this.chain.type || this.newNetworkType,
       newNetworkLayer: this.chain.layer || 'other',
       localShake: {}, 

diff --git a/app/App/Panel/Phase/AddAragon/index.js b/app/App/Panel/Phase/AddAragon/index.js
@@ -205,8 +205,8 @@ class AddAragon extends React.Component {
             className='phaseItemSummary' onMouseDown={() => {
               const net = this.store('main.currentNetwork.id')
               const open = url => this.store.notify('openExternal', { url })
-              if (net === '1') return open('https://mainnet.aragon.org')
-              if (net === '4') return open('https://rinkeby.aragon.org')
+              if (net === 1) return open('https://mainnet.aragon.org')
+              if (net === 4) return open('https://rinkeby.aragon.org')
               return open('https://aragon.org')
             }}
           >{'Don\'t have a dao? Create one'}

diff --git a/app/App/Panel/Phase/AddPhrase/index.js b/app/App/Panel/Phase/AddPhrase/index.js
@@ -116,7 +116,7 @@ class AddPhrase extends React.Component {
             <div
               className='phaseItemOptionIntro' onMouseDown={() => {
                 this.adding()
-                if (this.store('main.currentNetwork.id') === '1') setTimeout(() => this.store.notify('hotAccountWarning'), 800)
+                if (this.store('main.currentNetwork.id') === 1) setTimeout(() => this.store.notify('hotAccountWarning'), 800)
               }}
             >
               Add Phrase Account

diff --git a/main/accounts/Account/index.js b/main/accounts/Account/index.js
@@ -72,7 +72,7 @@ class Account {
           this.update()
         }, {
           type: 'ethereum', 
-          id: '1'
+          id: 1
         })
       })
     }

diff --git a/main/accounts/index.js b/main/accounts/index.js
@@ -174,7 +174,7 @@ class Accounts extends EventEmitter {
       if (currentAccount.requests[id].type !== 'transaction') return reject(new Error('Request is not transaction'))
 
       const data = JSON.parse(JSON.stringify(currentAccount.requests[id].data))
-      const targetChain = { type: 'ethereum', id: parseInt(data.chainId, 'hex').toString()}
+      const targetChain = { type: 'ethereum', id: parseInt(data.chainId, 'hex')}
       const { levels } = store('main.networksMeta', targetChain.type, targetChain.id, 'gas.price')
 
       // Set the gas default to asap
@@ -219,7 +219,7 @@ class Accounts extends EventEmitter {
             account.update()
             if (!account.requests[id].feeAtTime) {
               const network = targetChain
-              if (network.type === 'ethereum' && network.id === '1') {
+              if (network.type === 'ethereum' && network.id === 1) {
                 fetch('https://api.etherscan.io/api?module=stats&action=ethprice&apikey=KU5RZ9156Q51F592A93RUKHW1HDBBUPX9W').then(res => res.json()).then(res => {
                   if (res && res.message === 'OK' && res.result && res.result.ethusd) {
                     const { gasUsed } = account.requests[id].tx.receipt
@@ -386,7 +386,7 @@ class Accounts extends EventEmitter {
       // If chainId, update pending tx requests from that chain, otherwise update all pending tx requests
       const transactions = Object.entries(currentAccount.requests)
         .filter(([_, req]) => req.type === 'transaction' && !req.locked && !req.feesUpdatedByUser)
-        .filter(([_, req]) => !chainId || parseInt(req.data.chainId, 'hex').toString() === chainId)
+        .filter(([_, req]) => !chainId || parseInt(req.data.chainId, 'hex') === chainId)
 
       transactions.forEach(([id, req]) => {
         const tx = req.data
@@ -832,7 +832,7 @@ class Accounts extends EventEmitter {
       } else {
         const { from, chainId } = txRequest.data
 
-        const targetChain = { type: 'ethereum', id: parseInt(chainId, 'hex').toString() }
+        const targetChain = { type: 'ethereum', id: parseInt(chainId, 'hex') }
 
         proxyProvider.emit('send', { id: 1, jsonrpc: '2.0', method: 'eth_getTransactionCount', params: [from, 'pending'] }, (res) => {
           if (res.result) {

diff --git a/main/clients/Parity/index.js b/main/clients/Parity/index.js
@@ -41,9 +41,9 @@ class Parity extends EthereumClient {
   }
 
   _getChain (networkId) {
-    if (networkId === '1') return 'mainnet'
-    if (networkId === '3') return 'ropsten'
-    if (networkId === '42') return 'kovan'
+    if (networkId === 1) return 'mainnet'
+    if (networkId === 3) return 'ropsten'
+    if (networkId === 42) return 'kovan'
   }
 }
 

diff --git a/main/externalData/rates/index.ts b/main/externalData/rates/index.ts
@@ -58,7 +58,7 @@ async function loadPlatforms () {
 
     allPlatforms = platforms.reduce((platformMapping, platform) => {
       if (platform.chain_identifier) {
-        const chainId = platform.chain_identifier.toString()
+        const chainId = platform.chain_identifier
         return { ...platformMapping, [chainId]: platform.id }
       }
 
@@ -111,7 +111,7 @@ async function loadRates (ids: string[], chainId: number) {
 
   try {
     const symbolQuotes = await fetchPrices(Object.keys(lookupIds.symbols))
-    const tokenQuotes = await fetchTokenPrices(lookupIds.contracts, platforms[chainId.toString()] || 'ethereum')
+    const tokenQuotes = await fetchTokenPrices(lookupIds.contracts, platforms[chainId] || 'ethereum')
 
     return Object.entries({ ...symbolQuotes, ...tokenQuotes }).reduce((rates, [lookupId, quote]) => {
       const originalId = lookupIds.symbols[lookupId] || lookupId // could be symbol or contract address

diff --git a/main/index.js b/main/index.js
@@ -138,6 +138,11 @@ ipcMain.on('tray:addChain', (e, chain, req) => {
   accounts.resolveRequest(req)
 })
 
+ipcMain.on('tray:switchChain', (e, type, id, req) => {
+  if (type && id) store.selectNetwork(type, id)
+  accounts.resolveRequest(req)
+})
+
 ipcMain.on('tray:adjustNonce', (e, handlerId, nonceAdjust) => {
   accounts.adjustNonce(handlerId, nonceAdjust)
 })