Skip to content

Commit

Permalink
Display 8/8 address chars during signing instead of 4/4 (#914)
Browse files Browse the repository at this point in the history 
* Display 6 leading addr chars instead of 4

* show 6 leading and trailing digits on transaction confirms

* Increase display to 8/8

* create constant

Co-authored-by: Matt Holtzman <matt.holtzman@gmail.com>
  • Loading branch information
@stoooops @mholtzman
stoooops and mholtzman committed Jun 30, 2022
1 parent a60f388 commit a708ec9
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 17 deletions.
33 changes: 18 additions & 15 deletions ...p/Panel/Main/Account/Requests/TransactionRequest/TxApproval/approvals/TokenSpend/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import BigNumber from 'bignumber.js'
import svg from '../../../../../../../../../../resources/svg'
import link from '../../../../../../../../../../resources/link'

import { ApprovalType } from '../../../../../../../../../../resources/constants'
import { ADDRESS_DISPLAY_CHARS, ApprovalType } from '../../../../../../../../../../resources/constants'

const numberRegex = /\.0+$|(\.[0-9]*[1-9])0+$/
const MAX_HEX = '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'
Expand Down Expand Up @@ -64,7 +64,7 @@ class TokenSpend extends React.Component {
} else {
amount = '0x' + custom.integerValue().toString(16)
}

this.setState({ mode: 'custom', amount, customInput: value })
}
}
Expand Down Expand Up @@ -139,7 +139,7 @@ class TokenSpend extends React.Component {
} : {}}
onClick={() => {
this.props.onApprove(
this.props.req,
this.props.req,
ApprovalType.TokenSpendApproval,
{ amount: this.state.amount }
)
Expand Down Expand Up @@ -174,7 +174,7 @@ class TokenSpend extends React.Component {
{symbol}
</div>
{this.state.mode === 'custom' ? (
<input
<input
autoFocus
type='text'
aria-label='Custom Amount'
Expand All @@ -190,7 +190,7 @@ class TokenSpend extends React.Component {
/>
) : (
<div>
<div
<div
className='approveTokenSpendAmountNoInput'
role='textbox'
style={inputLock ? { cursor: 'default' } : null}
Expand All @@ -199,7 +199,7 @@ class TokenSpend extends React.Component {
}}
>
<div className='approveTokenSpendAmountNoInputNumber'>{displayAmount.number}</div>
<div className='approveTokenSpendAmountNoInputSymbol'>{displayAmount.symbol}</div>
<div className='approveTokenSpendAmountNoInputSymbol'>{displayAmount.symbol}</div>
</div>
</div>
)}
Expand All @@ -214,7 +214,7 @@ class TokenSpend extends React.Component {
>
Requested
</div>
<div
<div
className={this.state.mode === 'unlimited' ? 'approveTokenSpendPresetButton approveTokenSpendPresetButtonSelected' : 'approveTokenSpendPresetButton'}
role='button'
onClick={() => {
Expand All @@ -225,7 +225,7 @@ class TokenSpend extends React.Component {
<span className='approveTokenSpendPresetButtonInfinity'>{'Unlimited'}</span>
</div>
{!inputLock ? (
<div
<div
className={this.state.mode === 'custom' ? 'approveTokenSpendPresetButton approveTokenSpendPresetButtonSelected' : 'approveTokenSpendPresetButton'}
role='button'
onClick={() => {
Expand All @@ -245,18 +245,21 @@ class TokenSpend extends React.Component {
{data.spender ? (
<div className='approveTokenSpendSpenderAddress'>
<div className='approveTokenSpendSpenderAddressLarge'>
{data.spender.substring(0, 6)}
{
// 0x prefix plus leading characters of address
data.spender.substring(0, 2 + ADDRESS_DISPLAY_CHARS)
}
{svg.octicon('kebab-horizontal', { height: 15 })}
{data.spender.substr(data.contract.length - 4)}
{data.spender.substr(data.contract.length - ADDRESS_DISPLAY_CHARS)}
</div>
<div
className='approveTokenSpendSpenderAddressFull'
<div
className='approveTokenSpendSpenderAddressFull'
onClick={() => {
link.send('tray:clipboardData', data.spender)
this.setState({ copyTokenRequester: true })
setTimeout(() => {
this.setState({ copyTokenRequester: false })
}, 1000)
}, 1000)
}}
>
{this.state.copyTokenRequester ? 'ADDRESS COPIED' : data.spender}
Expand All @@ -270,14 +273,14 @@ class TokenSpend extends React.Component {
<div className='approveTokenSpendTokenSymbol'>
{symbol}
</div>
<div
<div
className='approveTokenSpendTokenContract'
onClick={() => {
link.send('tray:clipboardData', data.contract)
this.setState({ copyTokenContract: true })
setTimeout(() => {
this.setState({ copyTokenContract: false })
}, 1000)
}, 1000)
}}
>
{this.state.copyTokenContract ? 'ADDRESS COPIED' : data.contract}
Expand Down
4 changes: 2 additions & 2 deletions app/App/Panel/Main/Account/Requests/TransactionRequest/TxRecipient/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ class TxRecipient extends React.Component {
<div className='_txRecipientSlice _txRecipientValue'>
{ensName
? <span>{ensName}</span>
: <span>{address.substring(0, 6)}{svg.octicon('kebab-horizontal', { height: 15 })}{address.substring(address.length - 4)}</span>
: <span>{address.substring(0, 8)}{svg.octicon('kebab-horizontal', { height: 15 })}{address.substring(address.length - 6)}</span>
}
{req.decodedData && req.decodedData.contractName ? (
{req.decodedData && req.decodedData.contractName ? (
<span className={'_txRecipientContract'}>{(() => {
if (req.decodedData.contractName.length > 11) return `${req.decodedData.contractName.substr(0, 9)}..`
return req.decodedData.contractName
Expand Down
5 changes: 5 additions & 0 deletions resources/constants/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,8 @@ export enum ApprovalType {
GasLimitApproval = 'approveGasLimit',
TokenSpendApproval = 'approveTokenSpend'
}

const ADDRESS_DISPLAY_CHARS = 8
export {
ADDRESS_DISPLAY_CHARS
}

0 comments on commit a708ec9

Please sign in to comment.