Feat/decode permit requests

app/tray/Account/Account.js

@@ -22,77 +22,47 @@ import SignatureRequest from './Requests/SignatureRequest'
 import ChainRequest from './Requests/ChainRequest'
 import AddTokenRequest from './Requests/AddTokenRequest'
 import SignTypedDataRequest from './Requests/SignTypedDataRequest'
+import SignPermitRequest from './Requests/SignPermitRequest'
 import { isHardwareSigner } from '../../../resources/domain/signer'
+import { accountViewTitles } from '../../../resources/domain/request'
+
+const requests = {
+  sign: SignatureRequest,
+  signTypedData: SignTypedDataRequest,
+  signErc20Permit: SignPermitRequest,
+  transaction: TransactionRequest,
+  access: ProviderRequest,
+  addChain: ChainRequest,
+  addToken: AddTokenRequest
+}
+
+const modules = {
+  gas: Gas,
+  requests: Requests,
+  activity: Activity,
+  inventory: Inventory,
+  permissions: Permissions,
+  balances: Balances,
+  signer: Signer,
+  settings: Settings
+}
 
 class _AccountModule extends React.Component {
-  // constructor (props, context) {
-  //   super(props, context)
-  //   this.moduleRef = React.createRef()
-  //   this.state = {
-  //     transform: '',
-  //     transition: ''
-  //   }
-  //   this.xOffset = 2
-  //   this.yOffset = 2
-  //   this.attack = 0
-  //   this.release = 1
-  //   this.perspective = 500
-  // }
-  getModule(id, account, expanded, expandedData, filter) {
-    return id === 'gas' ? (
-      <Gas moduleId={id} id={account} expanded={expanded} filter={filter} />
-    ) : id === 'requests' ? (
-      <Requests moduleId={id} account={account} expanded={expanded} filter={filter} />
-    ) : id === 'activity' ? (
-      <Activity moduleId={id} id={account} expanded={expanded} filter={filter} />
-    ) : id === 'inventory' ? (
-      <Inventory
-        moduleId={id}
-        account={account}
-        expanded={expanded}
-        expandedData={expandedData}
-        filter={filter}
-      />
-    ) : id === 'permissions' ? (
-      <Permissions moduleId={id} account={account} expanded={expanded} filter={filter} />
-    ) : id === 'balances' ? (
-      <Balances moduleId={id} account={account} expanded={expanded} filter={filter} />
-    ) : id === 'signer' ? (
-      <Signer
-        moduleId={id}
-        account={account}
-        expanded={expanded}
-        filter={filter}
-        signer={this.props.signer}
+  getModule(moduleId, account, expanded, expandedData, filter) {
+    const Module = modules[moduleId] || Default
+
+    return (
+      <Module
+        {...{
+          account,
+          expanded,
+          expandedData,
+          filter,
+          moduleId
+        }}
       />
-    ) : id === 'settings' ? (
-      <Settings moduleId={id} account={account} expanded={expanded} filter={filter} />
-    ) : (
-      <Default moduleId={id} expanded={expanded} filter={filter} />
     )
   }
-  // map (value, istart, istop, ostart, ostop) {
-  //   console.log(value, istart, istop, ostart, ostop)
-  //   return ostart + (ostop - ostart) * ((value - istart) / (istop - istart))
-  // }
-
-  // set3d (e) {
-  //   if (this.moduleRef.current) {
-  //     const rectTransform = this.moduleRef.current
-  //     const perspective = 'perspective(' + this.perspective + 'px) '
-
-  //     let dy = 0 // e.clientY - rectTransform.offsetTop
-  //     let dx = e.clientX - rectTransform.offsetLeft
-  //     let xRot = this.map(dx, 0, rectTransform.clientWidth, - this.xOffset, this.xOffset)
-  //     let yRot = 0 // this.map(dy, 0, rectTransform.clientHeight, this.yOffset, - this.yOffset)
-  //     let propXRot = 'rotateX(' + yRot + 'deg) '
-  //     let propYRot = 'rotateY(' + xRot + 'deg)'
-
-  //     console.log({ transform: perspective + propXRot + propYRot })
-
-  //     this.setState({ transform: perspective + propXRot + propYRot })
-  //   }
-  // }
 
   render() {
     const { id, module, top, index, expanded, expandedData, account, filter } = this.props
@@ -103,7 +73,7 @@ class _AccountModule extends React.Component {
       height: module.height,
       opacity: 1
     }
-    //  && !this.props.signer) hidden = true
+
     if (hidden) {
       style = {
         transform: `translateY(${top}px)`,
@@ -118,37 +88,9 @@ class _AccountModule extends React.Component {
       return this.getModule(id, account, expanded, expandedData, filter)
     } else {
       return (
-        <div
-          className={'accountModule'}
-          ref={this.moduleRef}
-          style={style}
-          // onMouseEnter={() => {
-          //   this.setState({
-          //     transition: 'transform ' + this.attack + 's'
-          //   })
-          // }}
-          // onMouseMove={(e) => {
-          //   e.persist()
-          //   this.set3d(e)
-          // }}
-          // onMouseLeave={() => {
-          //   const perspective = 'perspective(' + this.perspective + 'px) '
-          //   this.setState({
-          //     transition: 'transform ' + this.release + 's',
-          //     transform: perspective + 'rotateX(0deg) rotateY(0deg)'
-          //   })
-          // }}
-        >
+        <div className={'accountModule'} ref={this.moduleRef} style={style}>
           <div className='accountModuleInner cardShow'>
-            <div
-              className='accountModuleCard'
-              // style={{
-              //   animationDelay: (index * 0.1) + 's',
-              //   transformStyle: 'preserve-3d',
-              //   transform: this.state.transform,
-              //   transition: this.state.transition
-              // }}
-            >
+            <div className='accountModuleCard'>
               {this.getModule(id, account, expanded, expandedData, filter)}
             </div>
           </div>
@@ -267,94 +209,67 @@ class _AccountBody extends React.Component {
       view: 'request'
     }
   }
-  renderRequest(req, data) {
+
+  getRequestComponent({ type }) {
+    return requests[type]
+  }
+
+  getChainData(req) {
+    if (req.type !== 'signErc20Permit') return {}
+    const chainId = req.typedMessage.data.domain.chainId
+    const chainName = this.store('main.networks.ethereum', chainId, 'name')
+    const { primaryColor: chainColor, icon } = this.store('main.networksMeta.ethereum', chainId)
+
+    return { chainId, chainName, chainColor, icon }
+  }
+
+  renderRequest(req, data = {}) {
+    const Request = this.getRequestComponent(req)
+    if (!Request) return null
+
+    const { handlerId } = req
+    const { step } = data
+
     const activeAccount = this.store('main.accounts', this.props.id)
+    const originName = this.store('main.origins', req.origin, 'name')
+    const chainData = this.getChainData(req)
+
     const signingDelay = isHardwareSigner(activeAccount.lastSignerType) ? 200 : 1500
 
-    if (req.type === 'transaction') {
-      return (
-        <TransactionRequest
-          key={req.handlerId}
-          req={req}
-          step={data.step}
-          handlerId={req.handlerId}
-          accountId={this.props.id}
-          signingDelay={signingDelay}
-        />
-      )
-    } else if (req.type === 'access') {
-      return (
-        <ProviderRequest key={req.handlerId} handlerId={req.handlerId} accountId={this.props.id} req={req} />
-      )
-    } else if (req.type === 'sign') {
-      return (
-        <SignatureRequest
-          key={req.handlerId}
-          req={req}
-          handlerId={req.handlerId}
-          accountId={this.props.id}
-          signingDelay={signingDelay}
-        />
-      )
-    } else if (req.type === 'signTypedData') {
-      return (
-        <SignTypedDataRequest
-          key={req.handlerId}
-          req={req}
-          handlerId={req.handlerId}
-          accountId={this.props.id}
-          signingDelay={signingDelay}
-        />
-      )
-    } else if (req.type === 'addChain' || req.type === 'switchChain') {
-      return (
-        <ChainRequest key={req.handlerId} req={req} handlerId={req.handlerId} accountId={this.props.id} />
-      )
-    } else if (req.type === 'addToken') {
-      return (
-        <AddTokenRequest key={req.handlerId} req={req} handlerId={req.handlerId} accountId={this.props.id} />
-      )
-    } else {
-      return null
-    }
+    return (
+      <Request
+        {...{
+          key: handlerId,
+          req,
+          step,
+          signingDelay,
+          chainId: chainData.chainId,
+          originName,
+          chainData
+        }}
+      />
+    )
+  }
+
+  getAccountViewTitle({ type }) {
+    return accountViewTitles[type]
   }
+
   render() {
     const crumb = this.store('windows.panel.nav')[0] || {}
 
     if (crumb.view === 'requestView') {
       const { accountId, requestId } = crumb.data
       const req = this.store('main.accounts', accountId, 'requests', requestId)
-      let accountViewTitle, accountViewIcon
-      if (req.type === 'access') {
-        accountViewTitle = 'Account Access'
-        // accountViewIcon = svg.accounts(17)
-      } else if (req.type === 'sign') {
-        accountViewTitle = 'Sign Message'
-        // accountViewIcon = svg.sign(17)
-      } else if (req.type === 'signTypedData') {
-        accountViewTitle = 'Sign Data'
-        // accountViewIcon = svg.sign(17)
-      } else if (req.type === 'addChain') {
-        accountViewTitle = 'Add Chain'
-        // accountViewIcon = svg.chain(17)
-      } else if (req.type === 'switchChain') {
-        accountViewTitle = 'Switch Chain'
-        // accountViewIcon = svg.chain(17)
-      } else if (req.type === 'addToken') {
-        accountViewTitle = 'Add Token'
-        // accountViewIcon = svg.tokens(17)
-      } else if (req.type === 'transaction') {
-        accountViewTitle = 'Sign Transaction'
-        // accountViewIcon = svg.broadcast(17)
-      }
+      const accountViewTitle = this.getAccountViewTitle(req)
+
       return (
         <AccountView
           back={() => {
             link.send('nav:back', 'panel')
           }}
           {...this.props}
           accountViewTitle={accountViewTitle}
-          accountViewIcon={accountViewIcon}
         >
           {this.renderRequest(req, crumb.data)}
         </AccountView>

app/tray/Account/Requests/ChainRequest/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import Restore from 'react-restore'
 import svg from '../../../../../resources/svg'
-import link from '../../../../../resources/link'
 
 class ChainRequest extends React.Component {
   constructor(...args) {