Git-Mirrors/haveno-ui
1
0
Fork 0
mirror of https://github.com/haveno-dex/haveno-ui.git synced 2025-01-23 22:01:28 -05: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", "dayjs": "^1.11.0",
"electron-store": "^8.0.1", "electron-store": "^8.0.1",
"electron-updater": "4.6.5", "electron-updater": "4.6.5",
"haveno-ts": "0.0.3", "haveno-ts": "0.0.4",
"joi": "^17.6.0", "joi": "^17.6.0",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",

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

@ -14,7 +14,7 @@
// limitations under the License. // limitations under the License.
// ============================================================================= // =============================================================================
import { useState } from "react"; import { useState, useMemo } from "react";
import { import {
Collapse, Collapse,
createStyles, createStyles,
@ -25,10 +25,18 @@ import {
} from "@mantine/core"; } from "@mantine/core";
import { ReactComponent as XMRLogo } from "@assets/xmr-logo-1.svg"; import { ReactComponent as XMRLogo } from "@assets/xmr-logo-1.svg";
import { ReactComponent as ArrowDown } from "@assets/arrow-down.svg"; import { ReactComponent as ArrowDown } from "@assets/arrow-down.svg";
import { useBalances } from "@hooks/haveno/useBalances";
export function WalletBalance() { export function WalletBalance() {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
const { classes } = useStyles({ isOpen }); const { classes } = useStyles({ isOpen });
const { data: availableBalances } = useBalances();
const Total = useMemo(() => {
return (
Number(availableBalances?.getLockedBalance() || 0) +
Number(availableBalances?.getReservedTradeBalance() || 0)
).toString();
}, [availableBalances]);
return ( return (
<UnstyledButton <UnstyledButton
className={classes.btnToggle} className={classes.btnToggle}
@ -43,7 +51,9 @@ export function WalletBalance() {
</Group> </Group>
<Stack spacing={4}> <Stack spacing={4}>
<Group> <Group>
<Text className={classes.xmr}>10.647382650365</Text> <Text className={classes.xmr}>
{availableBalances?.getBalance() ?? 0}
</Text>
<ArrowDown className={classes.toggleIcon} /> <ArrowDown className={classes.toggleIcon} />
</Group> </Group>
<Text className={classes.fiat}>(EUR 2441,02)</Text> <Text className={classes.fiat}>(EUR 2441,02)</Text>
@ -52,15 +62,19 @@ export function WalletBalance() {
<Stack> <Stack>
<Stack spacing={4}> <Stack spacing={4}>
<Text className={classes.balanceLabel}>Total</Text> <Text className={classes.balanceLabel}>Total</Text>
<Text className={classes.balanceValue}>14.048212174412</Text> <Text className={classes.balanceValue}>{Total}</Text>
</Stack> </Stack>
<Stack spacing={4}> <Stack spacing={4}>
<Text className={classes.balanceLabel}>Reserved</Text> <Text className={classes.balanceLabel}>Reserved</Text>
<Text className={classes.balanceValue}>2.874598526325</Text> <Text className={classes.balanceValue}>
{availableBalances?.getReservedTradeBalance() ?? 0}
</Text>
</Stack> </Stack>
<Stack spacing={4}> <Stack spacing={4}>
<Text className={classes.balanceLabel}>Locked</Text> <Text className={classes.balanceLabel}>Locked</Text>
<Text className={classes.balanceValue}>0.854975624859</Text> <Text className={classes.balanceValue}>
{availableBalances?.getLockedBalance() ?? 0}
</Text>
</Stack> </Stack>
</Stack> </Stack>
</Collapse> </Collapse>
@ -75,7 +89,6 @@ const useStyles = createStyles<string, { isOpen: boolean }>(
border: `solid 1px ${theme.colors.gray[4]}`, border: `solid 1px ${theme.colors.gray[4]}`,
borderRadius: theme.radius.md, borderRadius: theme.radius.md,
padding: theme.spacing.md, padding: theme.spacing.md,
width: "100%",
"&:hover": { "&:hover": {
borderColor: theme.colors.gray[5], 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`] = ` exports[`molecules::WalletBalance > renders without exploding 1`] = `
<DocumentFragment> <DocumentFragment>
<button <button
class="mantine-UnstyledButton-root mantine-qmn0rn" class="mantine-UnstyledButton-root mantine-3om9so"
type="button" type="button"
> >
<div <div
@ -59,7 +59,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-Group-child mantine-q5labh" class="mantine-Text-root mantine-Group-child mantine-q5labh"
> >
10.647382650365 0
</div> </div>
<svg <svg
class="mantine-Group-child mantine-qg5oag" class="mantine-Group-child mantine-qg5oag"
@ -105,7 +105,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-14d5cdm" class="mantine-Text-root mantine-14d5cdm"
> >
14.048212174412 0
</div> </div>
</div> </div>
<div <div
@ -119,7 +119,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-14d5cdm" class="mantine-Text-root mantine-14d5cdm"
> >
2.874598526325 0
</div> </div>
</div> </div>
<div <div
@ -133,7 +133,7 @@ exports[`molecules::WalletBalance > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-14d5cdm" class="mantine-Text-root mantine-14d5cdm"
> >
0.854975624859 0
</div> </div>
</div> </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" class="mantine-865t33"
> >
<button <button
class="mantine-UnstyledButton-root mantine-qmn0rn" class="mantine-UnstyledButton-root mantine-3om9so"
type="button" type="button"
> >
<div <div
@ -258,7 +258,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-Group-child mantine-q5labh" class="mantine-Text-root mantine-Group-child mantine-q5labh"
> >
10.647382650365 0
</div> </div>
<svg <svg
class="mantine-Group-child mantine-qg5oag" class="mantine-Group-child mantine-qg5oag"
@ -304,7 +304,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-14d5cdm" class="mantine-Text-root mantine-14d5cdm"
> >
14.048212174412 0
</div> </div>
</div> </div>
<div <div
@ -318,7 +318,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-14d5cdm" class="mantine-Text-root mantine-14d5cdm"
> >
2.874598526325 0
</div> </div>
</div> </div>
<div <div
@ -332,7 +332,7 @@ exports[`molecules::Sidebar > renders without exploding 1`] = `
<div <div
class="mantine-Text-root mantine-14d5cdm" class="mantine-Text-root mantine-14d5cdm"
> >
0.854975624859 0
</div> </div>
</div> </div>
</div> </div>

8
yarn.lock
View File

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