feat: use sdk for unit denomination and conversion (#290)

* feat: use sdk for unit denomination and conversion

* chore: moved to indexed sdk import

* chore: bumped sdk ghpkg

* fix: transfer amount prevent special char

* feat: transfer amount limited to less than myBalance

package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.10.4",
-    "@kiltprotocol/sdk-js": "^0.19.1-fe23e59.0",
+    "@kiltprotocol/sdk-js": "^0.19.1-be43462.0",
     "@polkadot/ui-identicon": "^0.33.1",
     "@types/react-select": "^2.0.11",
     "@types/reselect": "^2.2.0",

src/components/DevTools/DevTools.anticov.ts

@@ -1,6 +1,7 @@
 import * as sdk from '@kiltprotocol/sdk-js'
 import { IMetadata } from '@kiltprotocol/sdk-js/build/types/CTypeMetadata'
 import { ICTypeSchema } from '@kiltprotocol/sdk-js/build/types/CType'
+import BN from 'bn.js'
 import {
   ROOT_SEED,
   CTYPE,
@@ -109,7 +110,9 @@ export async function setupAndDelegate(delegate: IMyIdentity): Promise<void> {
   try {
     blockUi.updateMessage('Transferring funds to AntiCov authority')
     await new Promise(resolve => {
-      BalanceUtilities.makeTransfer(delegate, root.address, 4, () => resolve())
+      BalanceUtilities.makeTransfer(delegate, root.address, new BN(4), () =>
+        resolve()
+      )
     })
     blockUi.updateMessage('Setting up CType and Root Delegation')
     await verifyOrAddCtypeAndRoot()

src/components/DevTools/DevTools.tsx

@@ -1,12 +1,9 @@
 import React from 'react'
 
 import BN from 'bn.js'
+import { BalanceUtils } from '@kiltprotocol/sdk-js'
 import setupAndDelegate from './DevTools.anticov'
-import {
-  ENDOWMENT,
-  MIN_BALANCE,
-  TRANSACTION_FEE,
-} from '../../services/BalanceUtilities'
+import { ENDOWMENT, MIN_BALANCE } from '../../services/BalanceUtilities'
 import FeedbackService from '../../services/FeedbackService'
 import KiltToken from '../KiltToken/KiltToken'
 import { BsAttestation, BsAttestationsPool } from './DevTools.attestations'
@@ -141,7 +138,7 @@ class DevTools extends React.Component<Props> {
         )
       : new BN(0)
 
-    const minBalanceForBootstrap = ENDOWMENT.add(TRANSACTION_FEE)
+    const minBalanceForBootstrap = ENDOWMENT.add(BalanceUtils.TRANSACTION_FEE)
       .muln(Object.keys(identitiesPool).length)
       .add(MIN_BALANCE)
 

src/components/DevTools/DevTools.wallet.tsx

@@ -53,7 +53,7 @@ class BsIdentity {
       BalanceUtilities.makeTransfer(
         selectedIdentity,
         identity.address,
-        ENDOWMENT.toNumber(),
+        ENDOWMENT,
         () => {
           const newContact: IContact = {
             metaData: {

src/components/KiltToken/KiltToken.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { formatBalance } from '@polkadot/util'
 import BN from 'bn.js'
 import './KiltToken.scss'
+import { BalanceUtils } from '@kiltprotocol/sdk-js'
 
 type Props = {
   amount?: BN
@@ -27,15 +27,7 @@ const KiltToken: React.FC<Props> = ({ amount, colored = false }) => {
       onMouseEnter={() => setIsShown(true)}
       onMouseLeave={() => setIsShown(false)}
     >
-      {!isShown &&
-        formatBalance(
-          amount,
-          {
-            withSiFull: true,
-            withUnit: 'KILT',
-          },
-          15
-        )}
+      {!isShown && BalanceUtils.formatKiltBalance(amount)}
       {isShown && <>{amount.toString()}</>}
     </section>
   )

src/containers/Balance/Balance.tsx

@@ -2,15 +2,13 @@ import Immutable from 'immutable'
 import React, { ChangeEvent, ReactNode } from 'react'
 import BN from 'bn.js'
 import { connect, MapStateToProps } from 'react-redux'
+import { BalanceUtils } from '@kiltprotocol/sdk-js'
 import ContactPresentation from '../../components/ContactPresentation/ContactPresentation'
 import KiltToken from '../../components/KiltToken/KiltToken'
 import { ModalType } from '../../components/Modal/Modal'
 import SelectContacts from '../../components/SelectContacts/SelectContacts'
 import Spinner from '../../components/Spinner/Spinner'
-import {
-  BalanceUtilities,
-  TRANSACTION_FEE,
-} from '../../services/BalanceUtilities'
+import { BalanceUtilities } from '../../services/BalanceUtilities'
 import FeedbackService, { notifyFailure } from '../../services/FeedbackService'
 
 import * as Balances from '../../state/ducks/Balances'
@@ -91,16 +89,21 @@ class Balance extends React.Component<Props, State> {
 
   private onEnterTransferTokens(event: ChangeEvent<HTMLInputElement>): void {
     const { transfer } = this.state
-    const { value: amount } = event.target
+    const { value: inputValue, validity } = event.target
+    const amount = validity.valid ? inputValue : transfer.amount
     const myBalance = this.getMyBalance()
 
-    if (!myBalance || amount.includes('.')) {
+    if (!myBalance) {
       return
     }
 
     const amountNumber = new BN(amount)
 
-    if (amount === '' || (amountNumber.gtn(0) && amountNumber.lte(myBalance))) {
+    if (
+      amount === '' ||
+      (amountNumber.gtn(0) &&
+        BalanceUtils.convertToTxUnit(amountNumber, 0).lte(myBalance))
+    ) {
       this.setState({
         transfer: {
           ...transfer,
@@ -116,7 +119,7 @@ class Balance extends React.Component<Props, State> {
   }
 
   private getTokenTransferElement(balance: BN | undefined): ReactNode {
-    if (balance === undefined || balance.lt(TRANSACTION_FEE)) {
+    if (balance === undefined || balance.lt(BalanceUtils.TRANSACTION_FEE)) {
       return <div>Not available due to insufficient funds.</div>
     }
 
@@ -129,7 +132,8 @@ class Balance extends React.Component<Props, State> {
           <label>Transfer amount</label>
           <div>
             <input
-              type="number"
+              type="text"
+              pattern="[0-9]*"
               onChange={this.onEnterTransferTokens}
               value={amount}
               placeholder="Whole KILT tokens"
@@ -162,11 +166,7 @@ class Balance extends React.Component<Props, State> {
         <div className="actions">
           <button
             type="button"
-            disabled={
-              !amount ||
-              !Number.isFinite(Number(amount)) ||
-              (!toAddress && !toContact)
-            }
+            disabled={!amount || (!toAddress && !toContact)}
             onClick={this.identityCheck}
           >
             Transfer
@@ -225,7 +225,7 @@ class Balance extends React.Component<Props, State> {
       return
     }
 
-    BalanceUtilities.makeTransfer(myIdentity, receiverAddress, Number(amount))
+    BalanceUtilities.makeTransfer(myIdentity, receiverAddress, new BN(amount))
     this.setState({
       transfer: {
         amount: '',

src/services/BalanceUtilities.tsx

@@ -11,17 +11,11 @@ import errorService from './ErrorService'
 import { IContact, IMyIdentity } from '../types/Contact'
 import { notify, notifySuccess, notifyFailure } from './FeedbackService'
 
-const KILT_COIN = new BN(1)
-const KILT_FEMTO_COIN = new BN('1000000000000000')
-
-// cost of a chain transaction
-const TRANSACTION_FEE = KILT_COIN.muln(1)
-
 // any balance below this will we purged
-const MIN_BALANCE = KILT_COIN.muln(1)
+const MIN_BALANCE = sdk.BalanceUtils.KILT_COIN.muln(1)
 
 // initial endowment for automatically created accounts
-const ENDOWMENT = KILT_COIN.muln(30)
+const ENDOWMENT = sdk.BalanceUtils.KILT_COIN.muln(30)
 
 // TODO: do we need to do something upon deleting an identity?
 class BalanceUtilities {
@@ -64,10 +58,10 @@ class BalanceUtilities {
   public static makeTransfer(
     myIdentity: IMyIdentity,
     receiverAddress: IContact['publicIdentity']['address'],
-    amount: number,
+    amount: BN,
     successCallback?: () => void
   ): void {
-    const transferAmount = BalanceUtilities.asFemtoKilt(amount)
+    const transferAmount = sdk.BalanceUtils.asFemtoKilt(amount)
     notify(
       <div>
         <span>Transfer of </span>
@@ -134,10 +128,5 @@ class BalanceUtilities {
       Balances.Store.updateBalance(account, balance)
     )
   }
-
-  public static asFemtoKilt(balance: number): BN {
-    return new BN(balance).mul(KILT_FEMTO_COIN)
-  }
 }
-
-export { BalanceUtilities, ENDOWMENT, TRANSACTION_FEE, MIN_BALANCE }
+export { BalanceUtilities, MIN_BALANCE, ENDOWMENT }

yarn.lock

@@ -1081,10 +1081,10 @@
     "@polkadot/util" "^3.0.1"
     "@polkadot/util-crypto" "^3.0.1"
 
-"@kiltprotocol/sdk-js@^0.19.1-fe23e59.0":
-  version "0.19.1-fe23e59.0"
-  resolved "https://npm.pkg.github.com/download/@kiltprotocol/sdk-js/0.19.1-fe23e59.0/886c62a58cb21005967ecd2a562b6f6e0093fe6725638b9b2f07d375c5e0f103#a6a3cab130ebc29c70c18183b3dd00e1f4d867d0"
-  integrity sha512-Rc147dJYeE/xSq8LWOzrXH8J0tpdiCoyuGUlP2O4ZjK15nVfQvMvb+oTWdk7jia5YmxFpLq//C6LiJ/JYM3gtg==
+"@kiltprotocol/sdk-js@^0.19.1-be43462.0":
+  version "0.19.1-be43462.0"
+  resolved "https://npm.pkg.github.com/download/@kiltprotocol/sdk-js/0.19.1-be43462.0/82ccb1eba38898e45986db46cf88f528110eb53d1f8d08829e289581d3b9cfa3#9085a57aa20bd5c0e9c41f14fb613184ff19ad7c"
+  integrity sha512-GO7EbzZZlp6WHTZsKq52U9aeaczDHp/poQnY6/ZABIgOGWxQ2Dc366XmfXjqPC9VQejO/7brwxpxA7B77R9W4Q==
   dependencies:
     "@kiltprotocol/portablegabi" "^0.3.11"
     "@polkadot/api" "^1.26.1"