keychain在前端中的使用 / 网络研习社#69

https://github.com/MattyIce/steem-keychain

较之于MataMask在以太坊中的应用，Keychain就是在Steem中的应用。这两者都是去中心化的钱包，嵌入到浏览器中，帮你存储私钥。

最近因为一个项目的原因，大家也一致认为还是使用keychain比较好，所以花了些力气引用到前端中了。

keychain钱包是长这样的，设计方面有很大改进的余地。

keychain在前端中使用也就转帐，代理这些。把这些总结下，如下：

steem-keychain
使用案例
浏览器插件

//等待服务器注入steem_keychain
let waitForGlobal = async () =>{
  if(window.steem_keychain) {
    // Steem Keychain extension installed...
    console.log(123, "steem-keychain", window.steem_keychain)
  } else {
    // Steem Keychain extension not installed...
    console.log(444, "未安装steem-keychain！")
    let link = 'Google Chrome: https://chrome.google.com/webstore/detail/steem-keychain/lkcjlnjfpbikmcmbachjpdbijejflpcm\n\n' +
            'Firefox: https://addons.mozilla.org/en-US/firefox/addon/steem-keychain'
    alert("请安装steem-keychain钱包！\n\n"+link)
  } 
}
setTimeout(async () => {
  await waitForGlobal()
}, 500)

//登录
login(){
  let username = this.username
  let message = `dice_login-${Math.floor(100000000 + Math.random() * 900000000)}`
  let key_type = 'Posting'
  steem_keychain.requestSignBuffer(username, message, key_type, response => {
    console.log(136, response)
    if (response.success === true) {
      // If user is already logged in
      console.log(' Welcome.', username)
      this.$store.commit('saveUser', {username: username, addr: this.addr})
      this.$router.push({path:'/wallet'})
    } else {
      //  Verification failed
      alert("Steem帐户登录错误！\n"+response.message)
    }
  })
},
//登录成功结果
data:
  key: "posting"
  message: "dice_login-785467156"
  method: "Posting"
  request_id: 5
  type: "signBuffer"
  username: "timool"
__proto__: Object
error: null
message: "讯息签署已成功。"
publicKey: "STM6Cdxxxxxxxxe6TC4BL"
request_id: 5
result: "1f0ddxxxxxxxxf9"
success: true
注：res.success === true 可以做为判断结果。

//转帐
async steemTransfer() {
  try{
    this.isLoading = true
    this.exchangeFlag = false
    //steem转帐
    let addr = this.$store.state.addr
    let from = this.$store.state.username
    let to = process.env.VUE_APP_STEEM
    let enforce = process.env.VUE_APP_STEEM
    let ss = parseFloat(this.steemvalue).toFixed(3)
    let amount = ss
    let currency = 'STEEM'
    let memo = addr+" +"+ss+' TSTEEM'
    function steemTransfer(){
        return new Promise(resolve => {
            steem_keychain.requestTransfer(from, to, amount, memo, currency, function(response) {
                console.log(123654, response)
                resolve(response)
            },enforce)
        })
      }
      let res = await steemTransfer()
      if(res.success === true){
          //转帐成功
          console.log(123, "转帐成功")
          this.flag = false
          await this.getBalance()
          await this.getSteemStates()
          this.steemvalue = ''
          this.isLoading = false
          this.flag = true
      }else{
          this.steemvalue = ''
          this.isLoading = false
          this.flag = true
          alert("转帐错误！\n"+res.message)
      }
  }
  catch(e){
      this.isLoading = false
      alert("错误\n" + e)
  }
},

//代理
async delegate(){
  try {
      this.flag = false
      this.isLoading = true
      let username = this.$store.state.username
      let addr = this.$store.state.addr
      //steem代理
      let delegator = this.$store.state.username
      let delegatee = process.env.VUE_APP_STEEM
      let b = this.delegatevalue * this.spToVests
      let amount = b.toFixed(6)
      let unit = 'VESTS'
      function steemDelegate(){
          return new Promise(resolve => {
              steem_keychain.requestDelegation(delegator, delegatee, amount, unit, function(response) {
                  console.log(369, response)
                  resolve(response)
              })
          })
      }
      let res = await steemDelegate()
      if(res.success === true) {
          //代理成功
          //直接刷新当前页面
          this.$router.go(0)
      }else{
          this.delegatevalue = ''
          this.isLoading = false
          this.flag = true
          alert("代理错误！\n"+res.message)
      }
  }
  catch(e){
      this.isLoading = false
      alert("错误\n" + e)
  }
},

这是几个常见的函数，还有几个就不多举例了，使用方法都差不多。