beta.20 (#909)

* update test deps, scripts and config * separate electron-builder conf * remove space * update workflows * dont show zero balances on error (#897) * dont show zero balances on error * remove test code * address comments * better ux for verify address on device (#907) * better ux for verify address on device * left click only * clean up text logic * minor cleanup * make message to sign content more obvious to prevent forgery (#908) * make message to sign content more obvious to prevent forgery * Scroll notification * Cleanup Co-authored-by: Jordan Muir <jordan@frame.sh> * Trezor upgrades (#904) * update Trezor to use node packages * add temp scratch file * update temp file * update event flow * update event type * add comment, remove console log * add message and passphrase event handling * finish startup flow for trezor T * cleanup * add feedback on passphrase entry * update tests, UI * updates * remove comment * update flow for refresh and error handling * add ability to choose where to enter passphrase * fix tests * cleanup * revert verify button changes * revert changes * address comments * Style Trezor submit buttons * change any to unknown for errors Co-authored-by: Jordan Muir <jordan@frame.sh> * dont restart when frame is already running (#888) * use proxy connection for nebula (#836) * use proxy connection for nebula * fix connections * remove error catch * update startup sequence * use providers for nebula * fixes * remove console log * wait for nebula to be ready * update tests * update package lock Co-authored-by: goosewobbler <goosewobbler@pm.me> Co-authored-by: Jordan Muir <jordan@frame.sh>
floating · Jun 24, 2022 · f946832 · f946832
1 parent 2eb8f02
commit f946832
Show file tree

Hide file tree

Showing 46 changed files with 8,600 additions and 6,728 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -66,8 +66,8 @@ jobs:
         run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ./.npmrc
       - run: npm run setup
       - run: npm run compile
-      - run: npm run test:main -- --testTimeout=500 --verbose
-      - run: npm run test:components
+      - run: npm run test:unit:main -- --testTimeout=500 --verbose
+      - run: npm run test:unit:components
       - run: npm run bundle
       - name: Sleep for 4 seconds
         shell: bash

diff --git a/.github/workflows/compile-and-test.yml b/.github/workflows/compile-and-test.yml
@@ -19,5 +19,4 @@ jobs:
     - run: sudo apt install -y libudev-dev
     - run: npm run setup
     - run: npm run compile
-    - run: npm run test:main
-    - run: npm run test:components
+    - run: npm run test:unit
diff --git a/app/App/Panel/Main/Account/Requests/SignatureRequest/index.js b/app/App/Panel/Main/Account/Requests/SignatureRequest/index.js
@@ -11,7 +11,8 @@ function decodeMessage (rawMessage) {
     return buff.length === 32 ? rawMessage : buff.toString('utf8')
   }
 
-  return rawMessage
+  // replace all multiple line returns with just one to prevent excess space in message
+  return rawMessage.replaceAll(/[\n\r]+/g, '\n')
 }
 
 class TransactionRequest extends React.Component {
@@ -21,6 +22,8 @@ class TransactionRequest extends React.Component {
 
     const props = args[0] || {}
 
+    this.signRefs = [React.createRef(), React.createRef()]
+
     setTimeout(() => {
       this.setState({ allowInput: true })
     }, props.signingDelay || 1500)
@@ -50,6 +53,21 @@ class TransactionRequest extends React.Component {
     return (Math.round(parseFloat(fromWei(hex, 'ether')) * 1000000) / 1000000).toFixed(6)
   }
 
+  renderMessage (message) {
+    let showMore = false
+    if (this.signRefs[0].current && this.signRefs[1].current) {
+      const inner = this.signRefs[1].current.clientHeight
+      const wrap = this.signRefs[0].current.clientHeight + this.signRefs[0].current.scrollTop
+      if (inner > wrap) showMore = true
+    }
+    return (
+      <div ref={this.signRefs[0]} className='signValue'>
+        <div ref={this.signRefs[1]} className='signValueInner'>{message}</div>
+        {showMore ? <div className='signValueMore'>scroll to see more</div> : null}
+      </div>
+    )
+  }
+
   render () {
     const type = this.props.req.type
     const status = this.props.req.status
@@ -107,9 +125,7 @@ class TransactionRequest extends React.Component {
                     <div className='approveRequestHeaderIcon'> {svg.octicon('pencil', { height: 20 })}</div>
                     <div className='approveRequestHeaderLabel'> Sign Message</div>
                   </div>
-                  <div className='signValue'>
-                    <div className='signValueInner'>{message}</div>
-                  </div>
+                  {this.renderMessage(message)}
                 </>
               )}
             </div>

diff --git a/app/App/Panel/Main/Account/Requests/style/index.styl b/app/App/Panel/Main/Account/Requests/style/index.styl
@@ -731,14 +731,34 @@
     position absolute
     top 57px
     left 0
-    right 0
+    right 0px
     bottom 60px
     margin 0
     font-size 20px
     font-weight 300
     overflow-y scroll
     overflow-x hidden
 
+    .signValueMore
+      position fixed
+      pointer-events none
+      bottom 60px
+      left 5px
+      right 5px
+      background var(--ghostD)
+      color var(--moon)
+      border-radius 8px
+      height 24px
+      z-index 2000
+      text-align center
+      padding none
+      font-size 12px
+      text-transform uppercase
+      font-weight 500
+      display flex
+      justify-content center
+      align-items center
+
     .signValueInner
       width 100%
       display flex

diff --git a/app/App/Panel/Main/Account/Verify/index.js b/app/App/Panel/Main/Account/Verify/index.js
@@ -11,34 +11,54 @@ class Verify extends React.Component {
         link.send('tray:action', 'updateAccountModule', this.props.moduleId, { height: this.moduleRef.current.clientHeight })
       }
     })
+
     this.state = {
       expand: false,
       verifyAddressSuccess: false,
-      verifyAddressResponse: ''
+      verifyAddressResponse: '',
+      verifyInProgress: false
     }
   }
 
   verifyAddress () {
+    this.setState({ verifyInProgress: true })
+
     link.rpc('verifyAddress', err => {
       if (err) {
-        this.setState({ verifyAddressSuccess: false, verifyAddressResponse: err })
+        this.setState({ verifyInProgress: false, verifyAddressSuccess: false, verifyAddressResponse: err })
       } else {
-        this.setState({ verifyAddressSuccess: true, verifyAddressResponse: 'Address matched!' })
+        this.setState({ verifyInProgress: false, verifyAddressSuccess: true, verifyAddressResponse: 'Address matched!' })
       }
+
       setTimeout(() => {
         this.setState({ verifyAddressSuccess: false, verifyAddressResponse: '' })
-      }, 5000)
+      }, 5 * 1000)
     })
   }
 
+  getText (signerType) {
+    const isHwSigner = (signerType === 'seed' || signerType === 'ring')
+
+    if (this.state.verifyInProgress) {
+      return isHwSigner ? 'verifying' : 'check your device'
+    }
+
+    return isHwSigner ? 'verify address' : 'verify address on device'
+  }
+
   componentDidMount () {
     this.resizeObserver.observe(this.moduleRef.current)
   } 
 
   render () {
     const signerType = this.store('main.accounts', this.props.id, 'lastSignerType')
-    const signerKind = (signerType === 'seed' || signerType === 'ring') ? 'hot' : 'device'
     const account = this.store('main.accounts', this.props.id)
+    const buttonClasses = ['moduleButton']
+
+    if (this.state.verifyInProgress) {
+      buttonClasses.push('signerVerifyInProgress')
+    }
+
     return (
       <div ref={this.moduleRef} className='balancesBlock'>
         {account.smart ? (
@@ -61,8 +81,12 @@ class Verify extends React.Component {
               {this.state.verifyAddressResponse ? (
                 <div className={this.state.verifyAddressSuccess ? 'signerVerifyResponse signerVerifyResponseSuccess cardShow' : 'signerVerifyResponse'}>{this.state.verifyAddressResponse}</div>
               ) : null}
-              <div className='moduleButton' onMouseDown={() => this.verifyAddress()}>
-                {signerKind === 'hot' ? 'Verify Address' : 'Verify Address on Device'}
+              <div className={buttonClasses.join(' ')} onMouseDown={evt => {
+                if (evt.button === 0 && !this.state.verifyInProgress) {
+                  this.verifyAddress()
+                }
+              }}>
+                {this.getText(signerType)}
               </div>
             </div>
           </>

diff --git a/app/App/Panel/Main/Account/style/index.styl b/app/App/Panel/Main/Account/style/index.styl
@@ -1716,7 +1716,6 @@
   align-items center
   font-weight 400
   font-size 13px
-  cursor pointer
   box-sizing border-box
   text-transform uppercase
   box-shadow 0px 2px 2px var(--ghostA)
@@ -1730,7 +1729,12 @@
   *
     pointer-events none
 
-.moduleButton:hover
+.moduleButton.signerVerifyInProgress
+  background var(--ghostC)
+  color var(--outerspace04)
+
+.moduleButton:hover:not(.signerVerifyInProgress)
+  cursor pointer
   background var(--ghostD)
   box-shadow 0px 4px 6px var(--ghostA)
 

diff --git a/app/flex/index.js b/app/flex/index.js