profile: display balance breakdown

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",

src/actions/account.js

@@ -7,17 +7,9 @@ import { push } from 'connected-react-router'
 import { loadState, saveState, clearState } from '../utils/sessionStorage'
 import { WALLET_CREATE_NEW_ACCOUNT_URL, WALLET_CREATE_NEW_ACCOUNT_FLOW_URLS, WALLET_LOGIN_URL } from '../utils/wallet'
 
-export const loadAccount = createAction('LOAD_ACCOUNT',
-    accountId => wallet.getAccount(accountId).state(),
-    accountId => ({ accountId })
-)
-
 export const loadRecoveryMethods = createAction('LOAD_RECOVERY_METHODS',
-    async accountId => sendJson('POST', `${ACCOUNT_HELPER_URL}/account/recoveryMethods`, {
-        accountId: wallet.accountId,
-        ...(await wallet.signatureFor(wallet.accountId))
-    }),
-    accountId => ({ accountId })
+    wallet.getRecoveryMethods.bind(wallet),
+    () => ({})
 )
 
 export const handleRedirectUrl = (previousLocation) => (dispatch, getState) => {
@@ -203,12 +195,19 @@ export const { signAndSendTransactions } = createActions({
     ]
 })
 
-export const { switchAccount, refreshAccount, resetAccounts, refreshUrl, setFormLoader } = createActions({
+export const { switchAccount, refreshAccount, refreshAccountExternal, resetAccounts, refreshUrl, setFormLoader } = createActions({
     SWITCH_ACCOUNT: wallet.selectAccount.bind(wallet),
     REFRESH_ACCOUNT: [
         wallet.loadAccount.bind(wallet),
         () => ({ accountId: wallet.getAccountId(), })
     ],
+    REFRESH_ACCOUNT_EXTERNAL: [
+        async (accountId) => ({
+            ...await wallet.getAccount(accountId).state(),
+            balance: await wallet.getBalance(accountId)
+        }),
+        accountId => ({ accountId })
+    ],
     RESET_ACCOUNTS: wallet.clearState.bind(wallet),
     REFRESH_URL: null,
     SET_FORM_LOADER: null

src/components/GlobalStyle.js

@@ -374,6 +374,9 @@ export default createGlobalStyle`
     .ui.left.center.popup:before {
         box-shadow: 1px -1px 0 0 #eee;
     }
+    .ui.top.center.popup:before {
+        box-shadow: 1px 1px 0px 0px #eee;
+    }
     .ui.bottom.right.popup:before {
         box-shadow: -1px -1px 0 0 #eee;
     }

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 (
@@ -27,14 +29,13 @@ const Balance = ({ amount }) => {
 
 export const formatNEAR = (amount) => {
     let ret =  utils.format.formatNearAmount(amount, FRAC_DIGITS)
-    if (ret === '0') {
-        return `<${
-            !FRAC_DIGITS 
-                ? `0` 
-                : `0.${'0'.repeat((FRAC_DIGITS || 1) - 1)}1`
-        }`
+
+    if (amount === '0') {
+        return amount;
+    } else if (ret === '0') {
+        return `<${!FRAC_DIGITS ? `0` : `0.${'0'.repeat((FRAC_DIGITS || 1) - 1)}1`}`;
     }
-    return ret
+    return ret;
 }
 
 const showInYocto = (amountStr) => {

src/components/common/Balance.test.js

@@ -7,10 +7,16 @@ import Balance from './Balance'
 configure({adapter: new Adapter()});
 
 describe('<Balance.js>', ()=>{
+    const contextZero = '0'
     const contextTiny = '123456'
     const contextSmall = "1"+"0".repeat(19)
     const contextBig = "1234567"+"0".repeat(21)
 
+    it('balance should return properly for 0',()=>{
+        let wrapper = shallow(<Balance amount={contextZero} />)
+        expect(wrapper.text()).toEqual("0 Ⓝ");
+    })
+
     it('balance should return properly for non 0 for 0.0987',()=>{
         let wrapper = shallow(<Balance amount={contextTiny} />)
         expect(wrapper.text()).toEqual("<0.00001 Ⓝ");

src/components/common/InfoPopup.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Popup } from 'semantic-ui-react'
+import InfoIcon from '../svg/InfoIcon.js'
+
+const Trigger = styled.div`
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    margin-left: 5px;
+
+    svg {
+        height: 20px;
+        width: 20px;
+        fill: #F8F8F8;
+
+        circle {
+            :first-of-type {
+                stroke: none;
+            }
+            :last-of-type {
+                stroke: #b5b5b5;
+                fill: #b5b5b5;
+            }
+        }
+
+        line {
+            stroke: #b5b5b5;
+        }
+    }
+
+`
+
+const InfoPopup = ({
+    content,
+    position = 'top center'
+}) => (
+    <Popup
+        content={content}
+        trigger={<Trigger className='trigger'><InfoIcon/></Trigger>}
+        position={position}
+    />
+)
+
+export default InfoPopup

src/components/dashboard/DashboardDetail.js

@@ -2,9 +2,7 @@ import React, { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
 import { Translate } from 'react-localize-redux'
 import { withRouter } from 'react-router-dom'
-
 import { getAccessKeys, getTransactions, getTransactionStatus } from '../../actions/account'
-
 import DashboardSection from './DashboardSection'
 import DashboardActivity from './DashboardActivity'
 import PageContainer from '../common/PageContainer'
@@ -66,14 +64,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={amount} />
+                            <Balance amount={balance.total}/> 
                         </Fragment>
                         : <Translate id='balance.balanceLoading' />
                 )}

src/components/navigation/DesktopContainer.js

@@ -206,7 +206,7 @@ class DesktopContainer extends Component {
                         <User onClick={toggleMenu}>
                             <UserIcon/>
                             <UserName accountId={account.accountId}/>
-                            <UserBalance amount={account.amount}/>
+                            <UserBalance balance={account.balance}/>
                         </User>
                         <DesktopMenu
                             show={menuOpen}

src/components/navigation/MobileContainer.js

@@ -100,7 +100,7 @@ class MobileContainer extends Component {
                         <>
                             <User>
                                 <UserName accountId={account.accountId}/>
-                                <UserBalance amount={account.amount}/>
+                                <UserBalance balance={account.balance}/>
                             </User>
                             <MenuButton onClick={toggleMenu} open={menuOpen}/>
                         </>

src/components/navigation/UserBalance.js

@@ -6,9 +6,9 @@ const StyledBalance = styled.div`
     color: #8FD6BD;
 `
 
-const UserBalance = ({ amount }) => (
+const UserBalance = ({ balance }) => (
     <StyledBalance className='user-balance'>
-        {amount && <Balance amount={amount}/>}
+        {balance && <Balance amount={balance.total}/>}
     </StyledBalance>
 )
 

src/components/profile/Profile.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Translate } from 'react-localize-redux'
+import { useSelector } from 'react-redux'
 
 import PageContainer from '../common/PageContainer';
 import ProfileDetails from './ProfileDetails'
 import ProfileSection from './ProfileSection'
 import RecoveryContainer from './Recovery/RecoveryContainer'
 import { LOADING, NOT_FOUND, useAccount } from '../../hooks/allAccounts'
-import { useRecoveryMethods } from '../../hooks/recoveryMethods'
 
 export function Profile({ match }) {
     const { accountId } = match.params
     const account = useAccount(accountId)
-    const recoveryMethods = useRecoveryMethods(account.accountId)
+    const loginAccountId = useSelector(state => state.account.accountId)
 
     if (account.__status === LOADING) {
         return <PageContainer title={<Translate id='profile.pageTitle.loading' />} />
@@ -24,12 +24,11 @@ export function Profile({ match }) {
     return (
         <PageContainer title={<Translate id='profile.pageTitle.default' data={{ accountId }} />}>
             <ProfileSection>
-                <ProfileDetails account={account} />
-                <RecoveryContainer
-                    accountId={accountId}
-                    activeMethods={recoveryMethods}
-                />
+                <ProfileDetails account={account}/>
+                {accountId === loginAccountId && (
+                    <RecoveryContainer />
+                )}
             </ProfileSection>
         </PageContainer>
     )
-}
+}