diff --git a/src/components/admin-lte/admin-lte.css b/src/components/admin-lte/admin-lte.css index a832dc9..15a2cc3 100644 --- a/src/components/admin-lte/admin-lte.css +++ b/src/components/admin-lte/admin-lte.css @@ -12,6 +12,22 @@ text-align: center; } +.sidebar-balance .siderbar-balance-content{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-end; +} +.sidebar-balance span{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.sidebar-balance .siderbar-balance-content svg{ + margin-bottom: 1em!important; +} + .scanner-left-menu { padding: 5px 5px 5px 18px; diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js index 2558bf6..ada8245 100644 --- a/src/components/admin-lte/index.js +++ b/src/components/admin-lte/index.js @@ -6,7 +6,7 @@ import Wallet from './wallet' import siteConfig from '../site-config' // import Audit from "./audit" -import AdminLTE, { Sidebar, Navbar } from 'adminlte-2-react' +import AdminLTE, { Sidebar, Navbar, Box } from 'adminlte-2-react' import ScannerModal from '../qr-scanner/modal' import Layout from '../layout' @@ -18,20 +18,23 @@ import menuComponents from '../menu-components.js' import SendReceive from './send-receive' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' + + const { Item } = Sidebar // Screen width to hide the side menu on click const MENU_HIDE_WIDTH = 770 const BchWallet = -typeof window !== 'undefined' - ? window.SlpWallet - : null + typeof window !== 'undefined' + ? window.SlpWallet + : null let _this class AdminLTEPage extends React.Component { - constructor (props) { + constructor(props) { super(props) _this = this this.state = { @@ -39,7 +42,9 @@ class AdminLTEPage extends React.Component { showScannerModal: false, section: 'Wallet', menuIsHide: false, - walletInfo: {} + walletInfo: {}, + inFetch: false, + usdBalance: 0 } _this.BchWallet = BchWallet @@ -53,7 +58,7 @@ class AdminLTEPage extends React.Component { ] } - render () { + render() { return ( <> -
-
-

{siteConfig.balanceText}

+ +
+
-

{_this.state.bchBalance}

+ {!_this.state.inFetch &&
+ +

{siteConfig.balanceText}

+ + + {_this.state.bchBalance} + + USD: ${_this.state.usdBalance} + +
+ +
} +
-
+ + {_this.sidebar} @@ -133,22 +159,34 @@ class AdminLTEPage extends React.Component { } // Get wallet balance - async getBalance () { + async getBalance() { try { + _this.setState({ + inFetch: true + }) const { mnemonic } = _this.props.walletInfo if (mnemonic && _this.props.bchWallet) { const bchWalletLib = _this.props.bchWallet await bchWalletLib.walletInfoPromise - const myBalance = await bchWalletLib.getBalance() - _this.props.updateBalance(myBalance) + + const bchjs = bchWalletLib.bchjs + const currentRate = await bchjs.Price.current('usd') + _this.props.updateBalance({ myBalance, currentRate }) } + + _this.setState({ + inFetch: false + }) } catch (error) { console.error(error) + _this.setState({ + inFetch: false + }) } } - async componentDidMount () { + async componentDidMount() { _this.customMenuItems() _this.addOnClickEventToScanner() @@ -164,27 +202,28 @@ class AdminLTEPage extends React.Component { }, 250) } - componentDidUpdate () { + componentDidUpdate() { _this.updateState() } // Update component state when props change - updateState () { + updateState() { if (_this.props.walletInfo.mnemonic !== _this.state.walletInfo.mnemonic) { _this.setState({ walletInfo: _this.props.walletInfo }) } - if (_this.props.bchBalance !== _this.state.bchBalance) { + if (_this.props.bchBalance.bchBalance !== _this.state.bchBalance) { _this.setState({ - bchBalance: _this.props.bchBalance + bchBalance: _this.props.bchBalance.bchBalance, + usdBalance: _this.props.bchBalance.usdBalance }) } } // Due to that it is not possible to add the "onClick" method // directly to the component we do it using JS - customMenuItems () { + customMenuItems() { try { // Ignore menu items without link to components const ignoreItems = ['Balance', 'Qr Scanner', 'Link'] @@ -211,7 +250,7 @@ class AdminLTEPage extends React.Component { } // Displays the BCH balance by default - dropDownBalance () { + dropDownBalance() { try { const balanceEle = document.getElementById('Balance') balanceEle.children[0].click() @@ -223,7 +262,7 @@ class AdminLTEPage extends React.Component { // Section change, renders the corresponding component // to the selected section. each menu item corresponds // to a section. - changeSection (section) { + changeSection(section) { _this.activeItemById(section) _this.setState({ section: section @@ -232,7 +271,7 @@ class AdminLTEPage extends React.Component { } // Adds a visual mark to the selected item on the menu - activeItemById (id) { + activeItemById(id) { try { const elementActived = document.getElementsByClassName('active') elementActived[0].className = '' @@ -244,7 +283,7 @@ class AdminLTEPage extends React.Component { } // Hides the side menu when clicking on mobile devices - hideMenu () { + hideMenu() { try { const windowWidth = window.innerWidth // console.log("Window Width : ",windowWidth) @@ -257,7 +296,7 @@ class AdminLTEPage extends React.Component { } // Adds the "onClick" event to the QR scanner item - addOnClickEventToScanner () { + addOnClickEventToScanner() { try { const qrScannerEle = document.getElementById('Qr Scanner') qrScannerEle.onclick = () => _this.onHandleToggleScannerModal() @@ -267,7 +306,7 @@ class AdminLTEPage extends React.Component { } // Controller to show the QR scanner - onHandleToggleScannerModal () { + onHandleToggleScannerModal() { if (!_this.state.showScannerModal) { _this.hideMenu() } @@ -281,7 +320,7 @@ class AdminLTEPage extends React.Component { // Render non-default menu items. The catch ensures that the render function // won't be interrupted if there is an issue porting new menu items. - renderNewMenuItems () { + renderNewMenuItems() { try { return menuComponents && menuComponents.map(m => m.menuItem) } catch (err) { @@ -291,7 +330,7 @@ class AdminLTEPage extends React.Component { } // Displays the View corresponding to the dynamically loaded menu item. - renderNewViewItems () { + renderNewViewItems() { try { return ( menuComponents && @@ -302,10 +341,10 @@ class AdminLTEPage extends React.Component { return '' }) ) - } catch (err) {} + } catch (err) { } } - getInvisibleMenuItem () { + getInvisibleMenuItem() { return (
  • {/* Adding this childrens prevents console errors */} @@ -318,7 +357,7 @@ class AdminLTEPage extends React.Component { } // Define backends servers configuration by default - setDefaultServers () { + setDefaultServers() { try { const walletInfo = _this.props.walletInfo const accessLocation = window.location.hostname @@ -351,7 +390,7 @@ class AdminLTEPage extends React.Component { // Props prvided by redux AdminLTEPage.propTypes = { walletInfo: PropTypes.object.isRequired, // wallet info - bchBalance: PropTypes.number.isRequired, // bch balance + bchBalance: PropTypes.object.isRequired, // bch balance setWalletInfo: PropTypes.func.isRequired, // set wallet info updateBalance: PropTypes.func.isRequired, // update bch balance setBchWallet: PropTypes.func.isRequired, // set minimal-slp-wallet instance diff --git a/src/components/admin-lte/send-receive/send.js b/src/components/admin-lte/send-receive/send.js index 53168ea..9c35c1f 100644 --- a/src/components/admin-lte/send-receive/send.js +++ b/src/components/admin-lte/send-receive/send.js @@ -153,7 +153,9 @@ class Send extends React.Component { // update balance setTimeout(async () => { const myBalance = await bchWalletLib.getBalance() - _this.props.updateBalance(myBalance) + const bchjs = bchWalletLib.bchjs + const currentRate = await bchjs.Price.current('usd') + _this.props.updateBalance({ myBalance, currentRate }) }, 1000) _this.resetValues() diff --git a/src/components/admin-lte/wallet/create.js b/src/components/admin-lte/wallet/create.js index 14c74de..d40c774 100644 --- a/src/components/admin-lte/wallet/create.js +++ b/src/components/admin-lte/wallet/create.js @@ -5,13 +5,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' // import BchWallet from 'minimal-slp-wallet' const BchWallet = -typeof window !== 'undefined' - ? window.SlpWallet - : null + typeof window !== 'undefined' + ? window.SlpWallet + : null let _this class NewWallet extends React.Component { - constructor (props) { + constructor(props) { super(props) _this = this this.state = { @@ -22,7 +22,7 @@ class NewWallet extends React.Component { _this.BchWallet = BchWallet } - render () { + render() { return ( <> @@ -65,7 +65,7 @@ class NewWallet extends React.Component { ) } - async handleCreateWallet () { + async handleCreateWallet() { try { const currentWallet = _this.props.walletInfo @@ -106,10 +106,14 @@ class NewWallet extends React.Component { Object.assign(currentWallet, walletInfo) const myBalance = await bchWalletLib.getBalance() + + const bchjs = bchWalletLib.bchjs + const currentRate = await bchjs.Price.current('usd') + // console.log("myBalance", myBalance) // Update redux state _this.props.setWalletInfo(currentWallet) - _this.props.updateBalance(myBalance) + _this.props.updateBalance({ myBalance, currentRate }) _this.props.setBchWallet(bchWalletLib) _this.setState({ @@ -121,7 +125,7 @@ class NewWallet extends React.Component { } } - handleError (error) { + handleError(error) { // console.error(error) let errMsg = '' if (error.message) { diff --git a/src/components/admin-lte/wallet/import.js b/src/components/admin-lte/wallet/import.js index 9f11321..fc063fd 100644 --- a/src/components/admin-lte/wallet/import.js +++ b/src/components/admin-lte/wallet/import.js @@ -5,15 +5,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' // import BchWallet from 'minimal-slp-wallet' const BchWallet = -typeof window !== 'undefined' - ? window.SlpWallet - : null + typeof window !== 'undefined' + ? window.SlpWallet + : null const { Text } = Inputs let _this class ImportWallet extends React.Component { - constructor (props) { + constructor(props) { super(props) _this = this @@ -27,7 +27,7 @@ class ImportWallet extends React.Component { _this.BchWallet = BchWallet } - render () { + render() { return ( @@ -84,12 +84,12 @@ class ImportWallet extends React.Component { ) } - componentDidMount () { + componentDidMount() { // add max length property to mnemonic input // document.getElementById("import-mnemonic").maxLength = "12" } - handleUpdate (event) { + handleUpdate(event) { let value = event.target.value if (event.target.name === 'mnemonic') { value = value.toLowerCase() @@ -99,7 +99,7 @@ class ImportWallet extends React.Component { }) } - async handleImportWallet () { + async handleImportWallet() { try { _this.validateInputs() @@ -147,10 +147,12 @@ class ImportWallet extends React.Component { Object.assign(currentWallet, walletInfo) const myBalance = await bchWalletLib.getBalance() + const bchjs = bchWalletLib.bchjs + const currentRate = await bchjs.Price.current('usd') // Update redux state _this.props.setWalletInfo(currentWallet) - _this.props.updateBalance(myBalance) + _this.props.updateBalance({ myBalance, currentRate }) _this.props.setBchWallet(bchWalletLib) // Reset form and component state @@ -164,7 +166,7 @@ class ImportWallet extends React.Component { } // Reset form and component state - resetValues () { + resetValues() { _this.setState({ mnemonic: '', privateKey: '', @@ -174,7 +176,7 @@ class ImportWallet extends React.Component { mnemonicEle.value = '' } - validateInputs () { + validateInputs() { const { mnemonic } = _this.state if (mnemonic) { const spaceCount = mnemonic.split(' ').length // mnemonic.match(/ /g).length @@ -188,7 +190,7 @@ class ImportWallet extends React.Component { } } - handleError (error) { + handleError(error) { // console.error(error) let errMsg = '' if (error.message) { diff --git a/src/components/layout.css b/src/components/layout.css index f0dcb3d..0cbe139 100644 --- a/src/components/layout.css +++ b/src/components/layout.css @@ -737,4 +737,7 @@ pre tt:after { } .breadcrumb{ display:none +} +.background-none{ + background: none!important; } \ No newline at end of file diff --git a/src/redux/createStore.js b/src/redux/createStore.js index 956fd1d..84d26a2 100644 --- a/src/redux/createStore.js +++ b/src/redux/createStore.js @@ -3,9 +3,9 @@ import { createStore as reduxCreateStore } from 'redux' import { getWalletInfo, setWalletInfo } from '../components/localWallet' // import BchWallet from 'minimal-slp-wallet' const BchWallet = -typeof window !== 'undefined' - ? window.SlpWallet - : null + typeof window !== 'undefined' + ? window.SlpWallet + : null const reducer = (state, action) => { // Update walletInfo state property @@ -27,11 +27,18 @@ const reducer = (state, action) => { // Update bchBalance state property if (action.type === 'UPDATE_BALANCE') { // Convert satoshis to bch - const satoshis = action.value + const { myBalance, currentRate } = action.value + + const satoshis = myBalance const bch = satoshis / 100000000 + const bchBalance = Number(bch.toFixed(8)) + const _usdBalance = bchBalance * (currentRate / 100) + const usdBalance = Number(_usdBalance.toFixed(2)) // usd balance + + return Object.assign({}, state, { - bchBalance: Number(bch.toFixed(8)) + bchBalance: { bchBalance, usdBalance } }) } // Adds the minimal-slp-wallet instance to the Redux state @@ -78,7 +85,7 @@ const instanceWallet = () => { // initial state const initialState = { walletInfo: localStorageInfo, // Object wallet info - bchBalance: 0, // Wallet Balance + bchBalance: { bchBalance: 0, usdBalance: 0 }, // Wallet Balance bchWallet: instanceWallet() // minimal-slp-wallet instance }