diff --git a/new-lamassu-admin/src/pazuz/pages/ATMWallet/ATMWallet.js b/new-lamassu-admin/src/pazuz/pages/ATMWallet/ATMWallet.js new file mode 100644 index 00000000..f51e468f --- /dev/null +++ b/new-lamassu-admin/src/pazuz/pages/ATMWallet/ATMWallet.js @@ -0,0 +1,189 @@ +/* eslint-disable no-unused-vars */ +import { Paper } from '@material-ui/core' +import { makeStyles } from '@material-ui/core/styles' +import * as R from 'ramda' +import React from 'react' + +import TitleSection from 'src/components/layout/TitleSection' +import { H3, Info2, Label2, Label3, P } from 'src/components/typography' +import { ReactComponent as BitcoinLogo } from 'src/styling/logos/icon-bitcoin-colour.svg' +import { ReactComponent as BitcoinCashLogo } from 'src/styling/logos/icon-bitcoincash-colour.svg' +import { ReactComponent as DashLogo } from 'src/styling/logos/icon-dash-colour.svg' +import { ReactComponent as EthereumLogo } from 'src/styling/logos/icon-ethereum-colour.svg' +import { ReactComponent as LitecoinLogo } from 'src/styling/logos/icon-litecoin-colour.svg' +import { ReactComponent as ZCashLogo } from 'src/styling/logos/icon-zcash-colour.svg' + +import styles from './ATMWallet.styles' + +const useStyles = makeStyles(styles) + +const CHIPS_PER_ROW = 6 + +const Assets = ({ balance, wallets, currency }) => { + const classes = useStyles({ numberOfChips: CHIPS_PER_ROW }) + + const walletFiatSum = () => { + return R.sum(R.map(it => it.fiatValue, wallets)) + } + + return ( +
+
+

Available balance

+
+ + {balance.toLocaleString('en-US', { maximumFractionDigits: 2 })} + + + {currency} + +
+
+ + +
+

Total balance in wallets

+
+ + {walletFiatSum().toLocaleString('en-US', { + maximumFractionDigits: 2 + })} + + + {currency} + +
+
+ = +
+

Total assets

+
+ + {balance.toLocaleString('en-US', { maximumFractionDigits: 2 })} + + + {currency} + +
+
+
+ ) +} + +const WalletInfoChip = ({ wallet, currency }) => { + const classes = useStyles({ numberOfChips: CHIPS_PER_ROW }) + + const getLogo = cryptoCode => { + switch (cryptoCode) { + case 'BTC': + return + case 'ETH': + return + case 'LTC': + return + case 'ZEC': + return + case 'BCH': + return + case 'DASH': + return + default: + return + } + } + + return ( +
+ +
+ {getLogo(wallet.cryptoCode)} + + {wallet.isHedged ? 'Hedged' : 'Not hedged'} + +
+
+ {wallet.name} value + + {wallet.amount.toLocaleString('en-US', { + maximumFractionDigits: 2 + })}{' '} + {wallet.cryptoCode} + + Hedged value + + {wallet.fiatValue.toLocaleString('en-US', { + maximumFractionDigits: 2 + })}{' '} + {currency} + +
+ +
+ ) +} + +const ATMWallet = () => { + const classes = useStyles({ numberOfChips: CHIPS_PER_ROW }) + + const wallets = [ + { + cryptoCode: 'BTC', + name: 'Bitcoin', + amount: 2.7, + fiatValue: 81452, + isHedged: true + }, + { + cryptoCode: 'ETH', + name: 'Ethereum', + amount: 4.1, + fiatValue: 4924, + isHedged: true + }, + { + cryptoCode: 'LTC', + name: 'Litecoin', + amount: 15, + fiatValue: 3016, + isHedged: true + }, + { + cryptoCode: 'ZEC', + name: 'Z-Cash', + amount: 20, + fiatValue: 2887, + isHedged: false + }, + { + cryptoCode: 'BCH', + name: 'Bitcoin Cash', + amount: 10.7, + fiatValue: 7074, + isHedged: true + }, + { + cryptoCode: 'DASH', + name: 'Dash', + amount: 10.7, + fiatValue: 1091, + isHedged: false + } + ] + + return ( + <> + + +

ATM Wallets

+
+ {R.map( + it => ( + + ), + wallets + )} +
+ + ) +} + +export default ATMWallet diff --git a/new-lamassu-admin/src/pazuz/pages/ATMWallet/ATMWallet.styles.js b/new-lamassu-admin/src/pazuz/pages/ATMWallet/ATMWallet.styles.js new file mode 100644 index 00000000..966cb370 --- /dev/null +++ b/new-lamassu-admin/src/pazuz/pages/ATMWallet/ATMWallet.styles.js @@ -0,0 +1,107 @@ +import { offColor } from 'src/styling/variables' + +const styles = ({ numberOfChips }) => ({ + totalAssetWrapper: { + display: 'flex', + flexDirection: 'row' + }, + totalAssetFieldWrapper: { + display: 'flex', + flexDirection: 'column' + }, + fieldHeader: { + color: offColor, + marginBottom: 5 + }, + fieldValue: { + fontSize: 36 + }, + fieldCurrency: { + fontSize: 20, + alignSelf: 'flex-end', + margin: [[0, 0, 5, 5]] + }, + separator: { + fontSize: 32, + alignSelf: 'center', + margin: [[25, 20, 0, 20]] + }, + walletChipList: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap' + }, + walletChipWrapper: { + flexGrow: 0, + flexShrink: 0, + flexBasis: `16.66667%`, + '&:nth-child(6n+1)': { + '& > div': { + margin: [[0, 10, 0, 0]] + } + }, + '&:nth-child(6n)': { + '& > div': { + margin: [[0, 0, 0, 10]] + } + }, + margin: [[10, 0]] + }, + walletChip: { + height: 200, + margin: [[0, 10]] + }, + walletHeader: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between' + }, + btcLogo: { + transform: `scale(0.4, 0.4)`, + margin: [[-8, 0, 0, -26]] + }, + ethLogo: { + transform: `scale(0.35, 0.35)`, + margin: [[-16, 0, -7, -15]], + maxHeight: 80, + maxWidth: 80 + }, + ltcLogo: { + transform: `scale(0.4, 0.4)`, + margin: [[-8, 0, 0, -26]] + }, + zecLogo: { + transform: `scale(0.4, 0.4)`, + margin: [[-15, 0, -9, -14]], + maxHeight: 80, + maxWidth: 80 + }, + bchLogo: { + transform: `scale(0.4, 0.4)`, + margin: [[-8, 0, 0, -15]] + }, + dashLogo: { + transform: `scale(0.4, 0.4)`, + margin: [[-13, 0, -10, -10]], + maxHeight: 80, + maxWidth: 80 + }, + hedgedText: { + color: offColor, + margin: [[13, 12, 0, 0]] + }, + walletValueWrapper: { + display: 'flex', + flexDirection: 'column', + margin: [[0, 0, 0, 15]] + }, + walletValue: { + fontSize: 18, + margin: [[0, 0, 10, 0]] + }, + walletChipTitle: { + marginTop: 50 + } +}) + +export default styles diff --git a/new-lamassu-admin/src/pazuz/routing/routes.js b/new-lamassu-admin/src/pazuz/routing/routes.js index 1656dcb6..792f2501 100644 --- a/new-lamassu-admin/src/pazuz/routing/routes.js +++ b/new-lamassu-admin/src/pazuz/routing/routes.js @@ -41,9 +41,13 @@ import Transactions from 'src/pages/Transactions/Transactions' import Triggers from 'src/pages/Triggers' import UserManagement from 'src/pages/UserManagement/UserManagement' import Wizard from 'src/pages/Wizard' +<<<<<<< HEAD import PrivateRoute from 'src/routing/PrivateRoute' import PublicRoute from 'src/routing/PublicRoute' import { ROLES } from 'src/routing/utils' +======= +import ATMWallet from 'src/pazuz/pages/ATMWallet/ATMWallet' +>>>>>>> feat: pazuz ATM wallet screen import { namespaces } from 'src/utils/config' const useStyles = makeStyles({ @@ -247,6 +251,23 @@ const tree = [ } ] }, + { + key: 'accounting', + label: 'Accounting', + route: '/accounting', + allowedRoles: [ROLES.USER, ROLES.SUPERUSER], + get component() { + return () => + }, + children: [ + { + key: 'atmwallets', + label: 'ATM Wallets', + route: '/accounting/wallets', + component: ATMWallet + } + ] + }, { key: 'system', label: 'System',