Git-Mirrors/haveno-ui
1
0
Fork 0
mirror of https://github.com/haveno-dex/haveno-ui.git synced 2024-10-01 07:35:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: available balance

Browse Source
This commit is contained in:
Mert 2022-05-13 23:38:15 +03:00 committed by GitHub
parent 6505f47ef9
commit ba4b634aaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -84,7 +84,7 @@
"dayjs": "^1.11.0",
"electron-store": "^8.0.1",
"electron-updater": "4.6.5",
"haveno-ts": "0.0.3",
"haveno-ts": "0.0.4",
"joi": "^17.6.0",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",

25
packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx
View File

@ -14,7 +14,7 @@
// limitations under the License.
// =============================================================================
import { useState } from "react";
import { useState, useMemo } from "react";
import {
Collapse,
createStyles,
@ -25,10 +25,18 @@ import {
} from "@mantine/core";
import { ReactComponent as XMRLogo } from "@assets/xmr-logo-1.svg";
import { ReactComponent as ArrowDown } from "@assets/arrow-down.svg";
import { useBalances } from "@hooks/haveno/useBalances";
export function WalletBalance() {
const [isOpen, setOpen] = useState(false);
const { classes } = useStyles({ isOpen });
const { data: availableBalances } = useBalances();
const Total = useMemo(() => {
return (
Number(availableBalances?.getLockedBalance() || 0) +
Number(availableBalances?.getReservedTradeBalance() || 0)
).toString();
}, [availableBalances]);
return (
<UnstyledButton
className={classes.btnToggle}
@ -43,7 +51,9 @@ export function WalletBalance() {
</Group>
<Stack spacing={4}>
<Group>
<Text className={classes.xmr}>10.647382650365</Text>
<Text className={classes.xmr}>
{availableBalances?.getBalance() ?? 0}
</Text>
<ArrowDown className={classes.toggleIcon} />
</Group>
<Text className={classes.fiat}>(EUR 2441,02)</Text>
@ -52,15 +62,19 @@ export function WalletBalance() {
<Stack>
<Stack spacing={4}>
<Text className={classes.balanceLabel}>Total</Text>
<Text className={classes.balanceValue}>14.048212174412</Text>
<Text className={classes.balanceValue}>{Total}</Text>
</Stack>
<Stack spacing={4}>
<Text className={classes.balanceLabel}>Reserved</Text>
<Text className={classes.balanceValue}>2.874598526325</Text>
<Text className={classes.balanceValue}>
{availableBalances?.getReservedTradeBalance() ?? 0}
</Text>
</Stack>
<Stack spacing={4}>
<Text className={classes.balanceLabel}>Locked</Text>
<Text className={classes.balanceValue}>0.854975624859</Text>
<Text className={classes.balanceValue}>
{availableBalances?.getLockedBalance() ?? 0}
</Text>
</Stack>
</Stack>
</Collapse>
@ -75,7 +89,6 @@ const useStyles = createStyles<string, { isOpen: boolean }>(
border: `solid 1px ${theme.colors.gray[4]}`,
borderRadius: theme.radius.md,
padding: theme.spacing.md,
width: "100%",
"&:hover": {
borderColor: theme.colors.gray[5],

10
packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`molecules::WalletBalance > renders without exploding 1`] = `
<DocumentFragment>
<button
class="mantine-UnstyledButton-root mantine-qmn0rn"
class="mantine-UnstyledButton-root mantine-3om9so"
type="button"
>
<div
@ -59,7 +59,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-Group-child mantine-q5labh"
>
10.647382650365
0
</div>
<svg
class="mantine-Group-child mantine-qg5oag"
@ -105,7 +105,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-14d5cdm"
>
14.048212174412
0
</div>
</div>
<div
@ -119,7 +119,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-14d5cdm"
>
2.874598526325
0
</div>
</div>
<div
@ -133,7 +133,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-14d5cdm"
>
0.854975624859
0
</div>
</div>
</div>

10
packages/renderer/src/components/organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap
View File

@ -202,7 +202,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
class="mantine-865t33"
>
<button
class="mantine-UnstyledButton-root mantine-qmn0rn"
class="mantine-UnstyledButton-root mantine-3om9so"
type="button"
>
<div
@ -258,7 +258,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-Group-child mantine-q5labh"
>
10.647382650365
0
</div>
<svg
class="mantine-Group-child mantine-qg5oag"
@ -304,7 +304,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-14d5cdm"
>
14.048212174412
0
</div>
</div>
<div
@ -318,7 +318,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-14d5cdm"
>
2.874598526325
0
</div>
</div>
<div
@ -332,7 +332,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div
class="mantine-Text-root mantine-14d5cdm"
>
0.854975624859
0
</div>
</div>
</div>

8
yarn.lock
View File

@ -7973,10 +7973,10 @@ hastscript@^6.0.0:
property-information "^5.0.0"
space-separated-tokens "^1.0.0"
haveno-ts@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/haveno-ts/-/haveno-ts-0.0.3.tgz#610807a3d5cb5cf2eab07c3a07cf146b0875762e"
integrity sha512-yU6Dx22J/ynEDL9h9YunLB5el0UsmAcjqNl7YRbpHfdcKEzSrMFVihDcHIIO5gCLJY8S5dYfEWe/Mtm6XzFyzg==
haveno-ts@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/haveno-ts/-/haveno-ts-0.0.4.tgz#4d9fac6601887f384e5b380471988ee3e8b17783"
integrity sha512-8Yf1kyeuBCbfOr7T0uy87XcnNk8pfwS6uN4iuXgkAKLySByGl8Mxay7C0Fq1qPExz4hPJsJ8ql2qbaU1HJkbkg==
dependencies:
"@types/node" "^17.0.30"
console "^0.7.2"