feat: improve address formatting in keypair manage (#89)

Author: DennyWanye

packages/keypair/src/CreateKeypairModal.js

@@ -15,6 +15,7 @@ import {
 } from '@obsidians/ui-components'
 
 import notification from '@obsidians/notification'
+import { utils } from '@obsidians/eth-sdk'
 
 import keypairManager from './keypairManager'
 
@@ -47,6 +48,7 @@ export default class CreateKeypairModal extends PureComponent {
 
   regenerateKeypair = async () => {
     const keypair = await keypairManager.newKeypair(this.props.kp, this.state.chain, this.state.secretType)
+    keypair.address = utils.simplifyAddress(keypair.address)
     this.setState({ keypair })
   }
 
@@ -57,28 +59,30 @@ export default class CreateKeypairModal extends PureComponent {
   }
 
   onConfirm = async () => {
-    const { name, keypair } = this.state
+    const {name, keypair} = this.state
 
     if (!keypair) {
       this.onResolve()
       return
     }
 
+    keypair.address = utils.simplifyAddress(keypair.address)
+
     if (this.props.keypairs.find(k => k.name === name)) {
       notification.error(
-        `Create Keypair Failed`,
-        `The keypair name <b>${name}</b> has already been used.`
+          `Create Keypair Failed`,
+          `The keypair name <b>${name}</b> has already been used.`
       )
       return
     }
 
-    this.setState({ pending: true })
+    this.setState({pending: true})
     await keypairManager.saveKeypair(name, keypair)
-    this.setState({ pending: false })
+    this.setState({pending: false})
 
     this.modal.current.closeModal()
     this.onResolve(true)
-  }
+  };
 
   renderChainOptions = () => {
     const { chains } = this.props
@@ -156,7 +160,7 @@ export default class CreateKeypairModal extends PureComponent {
             <Badge pill color='info' className='ml-1'>Address</Badge>
           </div>
           <div className='col-10 pl-0'>
-            <code className='user-select small'>{address}</code>
+            <code className='user-select small'>{utils.formatAddress(address)}</code>
           </div>
         </div>
         <div className='row align-items-center'>

packages/keypair/src/ImportKeypairModal.js

@@ -8,6 +8,7 @@ import {
 } from '@obsidians/ui-components'
 
 import notification from '@obsidians/notification'
+import { utils } from '@obsidians/eth-sdk'
 
 import keypairManager from './keypairManager'
 
@@ -60,7 +61,7 @@ export default class ImportKeypairModal extends PureComponent {
       this.setState({
         keypair,
         valid: true,
-        feedback: <span>Address: <code>{keypair.address}</code></span>
+        feedback: <span>Address: <code>{utils.formatAddress(keypair.address)}</code></span>
       })
     } catch (e) {
       console.warn(e)

packages/keypair/src/KeypairManagerModal.js

@@ -9,6 +9,7 @@ import {
 } from '@obsidians/ui-components'
 
 import notification from '@obsidians/notification'
+import { utils } from '@obsidians/eth-sdk'
 
 import keypairManager from './keypairManager'
 
@@ -59,6 +60,10 @@ export default class KeypairManagerModal extends PureComponent {
   async refresh () {
     this.setState({ loading: true })
     const keypairs = await keypairManager.loadAllKeypairs()
+    keypairs.forEach(item=>{
+      item.address = utils.simplifyAddress(item.address)
+    })
+
     this.setState({ keypairs, loading: false })
   }
 
@@ -185,7 +190,7 @@ export default class KeypairManagerModal extends PureComponent {
         </td>
         <td>
           <div className='d-flex align-items-center'>
-            <code className='small'>{keypair.address}</code>
+            <code className='small'>{utils.formatAddress(keypair.address)}</code>
             <span className='text-transparent'>.</span>
             <DeleteButton
               color='primary'

packages/keypair/src/RevealSecretModal.js

@@ -6,6 +6,8 @@ import {
 } from '@obsidians/ui-components'
 
 import keypairManager from './keypairManager'
+import { utils } from '@obsidians/eth-sdk'
+
 
 export default class RevealSecretModal extends PureComponent {
   constructor (props) {
@@ -41,7 +43,7 @@ export default class RevealSecretModal extends PureComponent {
             <Badge pill color='info' className='ml-1'>Address</Badge>
           </div>
           <div className='col-10 pl-0'>
-            <code className='user-select small'>{address}</code>
+            <code className='user-select small'>{utils.formatAddress(address)}</code>
           </div>
         </div>
         <div className='row align-items-center'>