Support IOST

package.json

@@ -30,6 +30,7 @@
     "elliptic": "^6.4.1",
     "eth-lib": "^0.2.8",
     "html-loader": "^0.5.5",
+    "iost": "^0.1.17",
     "ismobilejs": "^0.5.1",
     "json-format": "^1.0.1",
     "keccak256": "^1.0.0",
@@ -81,7 +82,7 @@
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "flow-bin": "^0.86.0",
     "html-webpack-plugin": "^3.0.7",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.12.0",
     "opn": "^5.3.0",
     "react-hot-loader": "^4.0.0",
     "sass-loader": "^7.0.1",

src/components/BookLabel.js

@@ -7,6 +7,7 @@ const colors = {
   GENERAL: '#61c19e',
   ETH: '#737474',
   KLAY: '#3570D8',
+  IOST: '#2A3238',
 }
 
 const BookLabel = ({ title, style, active, onClick }) => (

src/components/KeyGenerate.js

@@ -0,0 +1,184 @@
+import React, { Component } from 'react'
+import cx from 'classnames'
+import { fromEvent, merge, Subject } from 'rxjs'
+import { map, filter, tap } from 'rxjs/operators'
+import keccak256 from 'keccak256'
+import nacl from 'tweetnacl'
+import base58 from 'bs58'
+
+import Input from 'components/Input'
+import ArrowDown from 'components/ArrowDown'
+import ec from 'utils/elliptic'
+import { putSubscriptions, unsubscribeAll, onlyWhenDesktop } from 'utils/stream'
+
+import './KeyGenerate.scss'
+
+type Props = {
+
+}
+
+class KeyGenerate extends Component<Props> {
+  state = {
+    focused: '',
+    changeTarget: {},
+    removeTarget: {},
+  }
+
+  subscriptions = []
+
+  privateKeySubject = new Subject()
+
+  initInputChangeStreams = () => {
+    // Input Change Streams
+    const privateKeyChange$ = merge(
+      fromEvent(this.$privateKey, 'input').pipe(
+        map((e) => e.target.value),
+      ),
+      this.privateKeySubject.pipe(
+        tap((privateKey) => {
+          this.$privateKey.value = privateKey
+        })
+      ),
+    )
+
+    const publicKeyChange$ = merge(
+      privateKeyChange$.pipe(
+        map(pvkey => {
+          if (!pvkey) return ''
+          const priKeyBytes = base58.decode(pvkey)
+
+          const kp = nacl.sign.keyPair.fromSeed(priKeyBytes.slice(0, 32))
+          const seckey = Buffer.from(kp.secretKey.buffer)
+          const pubkey = seckey.slice(seckey.length / 2)
+
+          return base58.encode(pubkey)
+        })
+      ),
+      fromEvent(this.$publicKey, 'input').pipe(
+        tap(this.clearPrivateKey),
+        map(e => e.target.value),
+      )
+    )
+
+    putSubscriptions(
+      this.subscriptions,
+      publicKeyChange$.subscribe(pbkeyRaw => {
+          if (this.$publicKey.value !== pbkeyRaw) this.$publicKey.value = pbkeyRaw
+        })
+    )
+  }
+
+  initActiveStreams = () => {
+    const privateKeyFocus$ = fromEvent(this.$privateKey, 'focus')
+    const privateKeyMouseEnter$ = onlyWhenDesktop(fromEvent(this.$privateKey, 'mouseenter'))
+    const privateKeyActive$ = merge(privateKeyFocus$, privateKeyMouseEnter$).pipe(
+      tap(() => {
+        this.setState({
+          changeTarget: {
+            publicKey: true,
+          }
+        })
+      })
+    )
+
+    const publicKeyFocus$ = fromEvent(this.$publicKey, 'focus')
+    const publicKeyMouseEnter$ = onlyWhenDesktop(fromEvent(this.$publicKey, 'mouseenter'))
+    const publicKeyActive$ = merge(publicKeyFocus$, publicKeyMouseEnter$).pipe(
+      tap(() => {
+        this.setState({
+          removeTarget: {
+            privateKey: true,
+          }
+        })
+      })
+    )
+
+    putSubscriptions(
+      this.subscriptions,
+      privateKeyActive$.subscribe(),
+      publicKeyActive$.subscribe()
+    )
+  }
+
+  initDeactiveStreams = () => {
+    const blur$ = merge(
+      fromEvent(this.$privateKey, 'blur'),
+      fromEvent(this.$publicKey, 'blur')
+    )
+    const mouseleave$ = merge(
+      fromEvent(this.$privateKey, 'mouseleave'),
+      fromEvent(this.$publicKey, 'mouseleave')
+    )
+
+    const deactive$ = merge(blur$, mouseleave$).pipe(
+      filter((e) => document.activeElement !== e.fromElement),
+      tap(() => {
+        this.setState({
+          changeTarget: {},
+          removeTarget: {},
+        })
+      })
+    )
+
+    putSubscriptions(
+      this.subscriptions,
+      deactive$.subscribe()
+    )
+  }
+
+  clearPrivateKey = () => {
+    this.$privateKey.value = ''
+  }
+
+  genPrivateKey = () => {
+    const kp = nacl.sign.keyPair()
+
+    const seckey = Buffer.from(kp.secretKey.buffer)
+    // this.pubkey = this.seckey.slice(this.seckey.length / 2)
+    // this.id = base58.encode(this.pubkey)
+
+    const generatedPrivateKey = base58.encode(seckey)
+    this.privateKeySubject.next(generatedPrivateKey)
+  }
+
+  componentDidMount() {
+    this.initInputChangeStreams()
+    this.initActiveStreams()
+    this.initDeactiveStreams()
+  }
+
+  componentWillUnmount() {
+    unsubscribeAll(this.subscriptions)
+  }
+
+  render() {
+    const { changeTarget, removeTarget } = this.state
+    return (
+      <div className="KeyGenerate">
+        <button onClick={this.genPrivateKey}>Generate!</button>
+        <div className="KeyGenerate__inputWrapper KeyGenerate__inputWrapper--privateKey">
+          <label className="KeyGenerate__label">Private key:</label>
+          <input
+            className={cx('KeyGenerate__privateKey', {
+              'KeyGenerate__privateKey--changeTarget': changeTarget.privateKey,
+              'KeyGenerate__privateKey--removeTarget': removeTarget.privateKey,
+            })}
+            ref={($privateKey) => this.$privateKey = $privateKey}
+          />
+        </div>
+        <ArrowDown visible={changeTarget.publicKey} />
+        <div className="KeyGenerate__inputWrapper KeyGenerate__inputWrapper--publicKey">
+          <label className="KeyGenerate__label">Public key:</label>
+          <textarea
+            className={cx('KeyGenerate__publicKey', {
+              'KeyGenerate__publicKey--changeTarget': changeTarget.publicKey
+            })}
+            ref={($publicKey) => this.$publicKey = $publicKey}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default KeyGenerate

src/components/KeyGenerate.scss

@@ -0,0 +1,72 @@
+@import "colors.scss";
+@import "mixins.scss";
+
+.KeyGenerate {
+  @include mobile {
+    width: 100%
+  }
+  width: 500px;
+  margin: 0 auto;
+}
+
+.KeyGenerate__label {
+  display: block;
+  font-size: 14px;
+}
+
+.KeyGenerate__inputWrapper {
+  margin: 4px;
+}
+
+.KeyGenerate__privateKey,
+.KeyGenerate__publicKey,
+.KeyGenerate__publicAddress {
+  font-size: 16px;
+  padding: 10px;
+  border: 2px solid #eeeeee;
+  border-radius: 3px;
+  transition: border-color 300ms;
+}
+
+.KeyGenerate__privateKey {
+  display: block;
+  width: 100%;
+  &--changeTarget {
+    border: 2px solid $key-change;
+  }
+
+  &--removeTarget {
+    border: 2px solid $key-remove;
+  }
+}
+
+.KeyGenerate__publicKey {
+  display: block;
+  width: 100%;
+  height: 70px;
+  &--changeTarget {
+    border: 2px solid $key-change;
+  }
+}
+
+.KeyGenerate__publicAddress {
+  display: block;
+  width: 100%;
+  cursor: default;
+  &--changeTarget {
+    border: 2px solid $key-change;
+  }
+}
+
+.KeyGenerate__arrow {
+  transition: opacity 300ms;
+  opacity: 0;
+  width: 10px;
+  height: 10px;
+  display: block;
+  margin: 10px auto;
+
+  &--visible {
+    opacity: 1;
+  }
+}

src/components/Menu.scss

@@ -38,6 +38,15 @@
       text-indent: 18px;
     }
   }
+
+  &--IOST {
+    background-color: $label-iost;
+    .Menu__item:hover {
+      background-color: $white;
+      color: $label-iost;
+      text-indent: 18px;
+    }
+  }
 }
 
 .Menu__title {

src/components/MobileMenu.scss

@@ -58,6 +58,15 @@
     }
     background-color: $label-klay;
   }
+
+  &--IOST {
+    @include mobile {
+      background-color: $white;
+      border-bottom: 1px solid $label-iost;
+      color: $label-iost;
+    }
+    background-color: $label-iost;
+  }
 }
 
 .MobileMenu__itemList {
@@ -86,6 +95,10 @@
   &--KLAY {
     background-color: $label-klay;
   }
+
+  &--IOST {
+    background-color: $label-iost;
+  }
 }
 
 .MobileMenu__hamburger {

src/constants/linkToDescription.js

@@ -88,6 +88,10 @@ const linkToDescription = {
     title: 'FEE DELEGATE',
     markdown: RawTransactionDecoderMarkdown,
   },
+  '/keygenerate': {
+    title: 'KEY GENERATE',
+    markdown: PrivateKeyToAddressMarkdown,
+  },
 }
 
 export default linkToDescription

src/constants/menu.js

@@ -19,12 +19,13 @@ export const menuItems = {
   ],
   'KLAY': [
     { title: 'PEB CONVERTER', link: '/pebConverter?l=KLAY' },
-    { title: 'HUMAN-READABLE ADDRESS', link: '/humanreadableAddress?l=KLAY' },
     { title: 'PRIVATEKEY TO ADDRESS', link: '/key?l=KLAY' },
     { title: 'KECCAK256', link: '/keccak256?l=KLAY' },
     { title: 'RAW TRANSACTION DECODER', link: '/klayRawTransactionDecoder?l=KLAY' },
-    { title: '(EXPERIMENTAL) FEE DELEGATE', link: '/feeDelegate?l=KLAY' },
-  ]
+  ],
+  'IOST': [
+    { title: 'KEY GENERATE', link: '/keygenerate?l=IOST' },
+  ],
 }
 
-export const bookLabels = ['GENERAL', 'ETH', 'KLAY']
+export const bookLabels = ['GENERAL', 'ETH', 'KLAY', 'IOST']

src/index.js

@@ -23,6 +23,7 @@ import PebConverter from 'components/PebConverter'
 import HumanreadableAddress from 'components/HumanreadableAddress'
 import KlayRawTransactionDecoder from 'components/KlayRawTransactionDecoder'
 import FeeDelegate from 'components/FeeDelegate'
+import KeyGenerate from 'components/KeyGenerate'
 
 window.isMobile = isMobile
 
@@ -68,6 +69,7 @@ export const renderRoutes = (rootComponent) => (
       <Route path="/humanreadableAddress" component={HumanreadableAddress} />
       <Route path="/klayRawTransactionDecoder" component={KlayRawTransactionDecoder} />
       <Route path="/feeDelegate" component={FeeDelegate} />
+      <Route path="/keygenerate" component={KeyGenerate} />
     </Route>
   </Router>
 )

src/styles/_colors.scss

@@ -6,6 +6,7 @@ $key-remove: #DD5D3F;
 $label-general: #73c8a9;
 $label-eth: #8F9090;
 $label-klay: #6A8DDA;
+$label-iost: #2B3137;
 
 $black: #000000;
 $white: #ffffff;