Fetch account balance breakdown from near-api-js

near · May 15, 2020 · bf7f1f1 · bf7f1f1
1 parent 694b50a
commit bf7f1f1
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 289 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "connected-react-router": "^6.6.0",
     "fetch-send-json": "0.0.2",
     "js-sha256": "^0.9.0",
+    "near-api-js": "^0.25.0",
     "near-ledger-js": "^0.0.4",
     "near-seed-phrase": "^0.0.2",
     "nearlib": "^0.22.0",

diff --git a/src/components/common/Balance.js b/src/components/common/Balance.js
@@ -1,12 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
 import { List } from 'semantic-ui-react'
-import { utils } from 'nearlib'
+import { utils } from 'near-api-js'
 import { BN } from 'bn.js'
 
 const CustomDiv = styled(List)`
     position: relative;
     display: inline;
+    white-space: nowrap;
 `
 
 const FRAC_DIGITS = 5
@@ -16,6 +17,7 @@ const Balance = ({ amount }) => {
     if (!amount) {
         throw new Error('amount property should not be null')
     }
+
     let amountShow = formatNEAR(amount)
 
     return (

diff --git a/src/components/dashboard/DashboardDetail.js b/src/components/dashboard/DashboardDetail.js
@@ -65,14 +65,24 @@ class DashboardDetail extends Component {
 
     render() {
         const { loader, notice } = this.state
-        const { authorizedApps, fullAccessKeys, transactions, amount, accountId, formLoader, getTransactionStatus } = this.props
+
+        const { 
+            authorizedApps, 
+            fullAccessKeys, 
+            transactions,
+            accountId, 
+            formLoader, 
+            getTransactionStatus, 
+            balance 
+        } = this.props
+
         return (
             <PageContainer
                 title={(
-                    amount
+                    balance
                         ? <Fragment>
                             <span className='balance'><Translate id='balance.balance' />: </span>
-                            <Balance  amount={wallet.getAccountBalance()}/> 
+                            <Balance amount={balance.total}/> 
                         </Fragment>
                         : <Translate id='balance.balanceLoading' />
                 )}

diff --git a/src/components/navigation/DesktopContainer.js b/src/components/navigation/DesktopContainer.js
@@ -206,7 +206,7 @@ class DesktopContainer extends Component {
                         <User onClick={toggleMenu}>
                             <UserIcon/>
                             <UserName accountId={account.accountId}/>
-                            <UserBalance/>
+                            <UserBalance balance={account.balance}/>
                         </User>
                         <DesktopMenu
                             show={menuOpen}

diff --git a/src/components/navigation/MobileContainer.js b/src/components/navigation/MobileContainer.js
@@ -100,7 +100,7 @@ class MobileContainer extends Component {
                         <>
                             <User>
                                 <UserName accountId={account.accountId}/>
-                                <UserBalance/>
+                                <UserBalance balance={account.balance}/>
                             </User>
                             <MenuButton onClick={toggleMenu} open={menuOpen}/>
                         </>

diff --git a/src/components/navigation/UserBalance.js b/src/components/navigation/UserBalance.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import Balance from '../common/Balance';
-import { wallet } from '../../utils/wallet';
 
 const StyledBalance = styled.div`
     color: #8FD6BD;
 `
 
-const UserBalance = () => (
+const UserBalance = ({ balance }) => (
     <StyledBalance className='user-balance'>
-        <Balance amount={wallet.getAccountBalance()}/>
+        {balance && <Balance amount={balance.total}/>}
     </StyledBalance>
 )
 

diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Translate } from 'react-localize-redux'
 
 import PageContainer from '../common/PageContainer';
@@ -7,11 +7,17 @@ import ProfileSection from './ProfileSection'
 import RecoveryContainer from './Recovery/RecoveryContainer'
 import { LOADING, NOT_FOUND, useAccount } from '../../hooks/allAccounts'
 import { useRecoveryMethods } from '../../hooks/recoveryMethods'
+import { wallet } from '../../utils/wallet'
 
 export function Profile({ match }) {
     const { accountId } = match.params
     const account = useAccount(accountId)
     const recoveryMethods = useRecoveryMethods(account.accountId)
+    const [balance, setBalance] = useState({});
+
+    useEffect(() => {
+        wallet.getBalance(accountId).then(balance => { setBalance(balance)})
+    }, [account.__status]);
 
     if (account.__status === LOADING) {
         return <PageContainer title={<Translate id='profile.pageTitle.loading' />} />
@@ -24,7 +30,7 @@ export function Profile({ match }) {
     return (
         <PageContainer title={<Translate id='profile.pageTitle.default' data={{ accountId }} />}>
             <ProfileSection>
-                <ProfileDetails account={account} />
+                <ProfileDetails accountId={accountId} balance={balance}/>
                 <RecoveryContainer
                     accountId={accountId}
                     activeMethods={recoveryMethods}