From 1d21c53dd4322791d071bbe7f6aa59f0747d8a8e Mon Sep 17 00:00:00 2001 From: vorujack Date: Thu, 26 Sep 2024 19:19:06 +0330 Subject: [PATCH 1/5] update issuedAndBurnt hook to return map and array --- apps/wallet/src/hooks/useIssuedAndBurntTokens.ts | 8 +++++++- .../src/pages/wallet-page/send/sign-tx/TxSignValues.tsx | 6 +++--- .../src/pages/wallet-page/transaction/TxAssetDetail.tsx | 3 ++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts b/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts index a314480..359663c 100644 --- a/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts +++ b/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts @@ -19,6 +19,7 @@ const useIssuedAndBurntTokens = ( tx: wasm.UnsignedTransaction | wasm.Transaction | undefined, boxes: Array, ) => { + const [mapped, setMapped] = useState>(new Map()); const [issued, setIssued] = useState>([]); const [burnt, setBurnt] = useState>([]); const [storedTxId, setStoredTxId] = useState(''); @@ -41,20 +42,25 @@ const useIssuedAndBurntTokens = ( } const issuedTokens: Array = []; const burntTokens: Array = []; + const mappedTokens: Map = new Map(); for (const [tokenId, amount] of tokens.entries()) { if (amount > 0n) { issuedTokens.push({ tokenId, amount }); } else if (amount < 0n) { burntTokens.push({ tokenId, amount: -amount }); } + if(amount !== 0n){ + mappedTokens.set(tokenId, amount); + } } setIssued(issuedTokens); setBurnt(burntTokens); + setMapped(mappedTokens); setStoredTxId(tx.id().to_str()); setLoading(false); } }, [tx, boxes, storedTxId, loading]); - return { issued, burnt }; + return { issued, burnt, mapped }; }; export default useIssuedAndBurntTokens; diff --git a/apps/wallet/src/pages/wallet-page/send/sign-tx/TxSignValues.tsx b/apps/wallet/src/pages/wallet-page/send/sign-tx/TxSignValues.tsx index ea99c28..5cff27d 100644 --- a/apps/wallet/src/pages/wallet-page/send/sign-tx/TxSignValues.tsx +++ b/apps/wallet/src/pages/wallet-page/send/sign-tx/TxSignValues.tsx @@ -15,7 +15,7 @@ interface WalletSignNormalPropsType { } const TxSignValues = (props: WalletSignNormalPropsType) => { - const issuedAndBurnt = useIssuedAndBurntTokens(props.tx, props.boxes); + const { issued, burnt } = useIssuedAndBurntTokens(props.tx, props.boxes); const { txValues, valuesDirection } = useTxValues( props.tx, props.boxes, @@ -75,13 +75,13 @@ const TxSignValues = (props: WalletSignNormalPropsType) => { These amount will be spent when transaction proceed. { const details = useAssetDetail(props.id, props.networkType); @@ -35,7 +36,7 @@ const TxAssetDetail = (props: TxAssetDetailPropsType) => { 0 ? 'Received' : 'Sent'} + id={props.label ? props.label : props.amount > 0 ? 'Received' : 'Sent'} /> ); From 10040a9e1b54709c352ae2cdfae5136bdbe93399 Mon Sep 17 00:00:00 2001 From: vorujack Date: Thu, 26 Sep 2024 19:47:46 +0330 Subject: [PATCH 2/5] show issued and burnt tokens and token details --- apps/wallet/src/components/tx/TxDisplay.tsx | 60 +++++-------------- .../wallet-page/asset/AssetItemDetail.tsx | 2 +- .../wallet-page/transaction/TxAssetDetail.tsx | 37 ++++++++++-- 3 files changed, 50 insertions(+), 49 deletions(-) diff --git a/apps/wallet/src/components/tx/TxDisplay.tsx b/apps/wallet/src/components/tx/TxDisplay.tsx index c3ceef1..f064004 100644 --- a/apps/wallet/src/components/tx/TxDisplay.tsx +++ b/apps/wallet/src/components/tx/TxDisplay.tsx @@ -1,13 +1,12 @@ import { openTxInBrowser } from '@/action/tx'; import ErgAmount from '@/components/amounts-display/ErgAmount'; -import IssuedBurntTokenAmount from '@/components/token-amount/IssuedBurntTokenAmount'; import useIssuedAndBurntTokens from '@/hooks/useIssuedAndBurntTokens'; import useTxValues from '@/hooks/useTxValues'; import TxAssetDetail from '@/pages/wallet-page/transaction/TxAssetDetail'; import { StateWallet } from '@/store/reducer/wallet'; import { getValueColor } from '@/utils/functions'; import { OpenInNew } from '@mui/icons-material'; -import { IconButton, Stack, Typography } from '@mui/material'; +import { IconButton, Typography } from '@mui/material'; import React from 'react'; import * as wasm from 'ergo-lib-wasm-browser'; @@ -20,7 +19,7 @@ interface TxDisplayPropsType { const TxDisplay = ({ tx, boxes, wallet, date }: TxDisplayPropsType) => { const txId = tx.id().to_str(); - const issuedAndBurnt = useIssuedAndBurntTokens(tx, boxes); + const { mapped } = useIssuedAndBurntTokens(tx, boxes); const { txValues } = useTxValues(tx, boxes, wallet); const openTx = () => openTxInBrowser(wallet.networkType, txId ?? ''); return ( @@ -58,49 +57,22 @@ const TxDisplay = ({ tx, boxes, wallet, date }: TxDisplayPropsType) => { {Object.entries(txValues.tokens).map((item) => ( - - ))} - {issuedAndBurnt.burnt.length > 0 ? ( - - Burnt tokens - - - {issuedAndBurnt.burnt.map((item) => ( - - ))} - + + - ) : null} - {issuedAndBurnt.issued.length > 0 ? ( - - - Issued tokens - - - {issuedAndBurnt.issued.map((item) => ( - - ))} - - - ) : null} + ))} ); }; diff --git a/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx b/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx index d088600..e54aa2e 100644 --- a/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx +++ b/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx @@ -9,7 +9,7 @@ interface AssetItemDetailPropsType { id: string; description?: string; logo?: React.ElementType; - balance: React.ReactNode | string; + balance?: React.ReactNode | string; emissionAmount: React.ReactNode | string; txId: string; handleClose: () => unknown; diff --git a/apps/wallet/src/pages/wallet-page/transaction/TxAssetDetail.tsx b/apps/wallet/src/pages/wallet-page/transaction/TxAssetDetail.tsx index 86796a0..7bf5a1a 100644 --- a/apps/wallet/src/pages/wallet-page/transaction/TxAssetDetail.tsx +++ b/apps/wallet/src/pages/wallet-page/transaction/TxAssetDetail.tsx @@ -1,20 +1,24 @@ import TokenAmountDisplay from '@/components/amounts-display/TokenAmountDisplay'; import DisplayId from '@/components/display-id/DisplayId'; import useAssetDetail from '@/hooks/useAssetDetail'; +import AssetItemDetail from '@/pages/wallet-page/asset/AssetItemDetail'; import { getValueColor } from '@/utils/functions'; import { Avatar, Box, Typography } from '@mui/material'; -import React from 'react'; +import Drawer from '@mui/material/Drawer'; +import React, { useState } from 'react'; interface TxAssetDetailPropsType { id: string; amount: bigint; networkType: string; - label?: string; + issueAndBurn?: boolean; } const TxAssetDetail = (props: TxAssetDetailPropsType) => { const details = useAssetDetail(props.id, props.networkType); if (props.amount === 0n) return null; const color = getValueColor(props.amount); + const [showDetail, setShowDetail] = useState(false); + const getLabel = () => props.amount > 0 ? (props.issueAndBurn ? 'Issued' : 'Received') : (props.issueAndBurn ? 'Burnt': 'Sent'); return ( @@ -26,7 +30,7 @@ const TxAssetDetail = (props: TxAssetDetailPropsType) => { )} - + setShowDetail(true)}> {details.name} {props.amount > 0 ? '+' : ''} @@ -36,8 +40,33 @@ const TxAssetDetail = (props: TxAssetDetailPropsType) => { 0 ? 'Received' : 'Sent'} + id={getLabel()} /> + setShowDetail(false)} + > + 0n ? ( + + ) : ( + '?' + ) + } + txId={details.txId} + handleClose={() => setShowDetail(false)} + /> + + ); }; From d784774e94b1461db630f2f5324505a18bfb6459 Mon Sep 17 00:00:00 2001 From: vorujack Date: Thu, 26 Sep 2024 19:58:14 +0330 Subject: [PATCH 3/5] fix display balance in asset details page --- apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx b/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx index e54aa2e..a46fcd7 100644 --- a/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx +++ b/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx @@ -37,7 +37,7 @@ const AssetItemDetail = (props: AssetItemDetailPropsType) => { - + {props.balance ? : null} Date: Thu, 26 Sep 2024 20:03:16 +0330 Subject: [PATCH 4/5] lint --- apps/wallet/src/components/tx/TxDisplay.tsx | 6 +++--- .../src/hooks/useIssuedAndBurntTokens.ts | 6 ++++-- .../wallet-page/asset/AssetItemDetail.tsx | 4 +++- .../wallet-page/transaction/TxAssetDetail.tsx | 20 ++++++++++--------- 4 files changed, 21 insertions(+), 15 deletions(-) diff --git a/apps/wallet/src/components/tx/TxDisplay.tsx b/apps/wallet/src/components/tx/TxDisplay.tsx index f064004..2f4bed1 100644 --- a/apps/wallet/src/components/tx/TxDisplay.tsx +++ b/apps/wallet/src/components/tx/TxDisplay.tsx @@ -62,14 +62,14 @@ const TxDisplay = ({ tx, boxes, wallet, date }: TxDisplayPropsType) => { amount={mapped.get(item[0]) ?? 0n} id={item[0]} networkType={wallet.networkType} - key={item[0]} + key={'ib-' + item[0]} issueAndBurn={true} /> ))} diff --git a/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts b/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts index 359663c..fece8e2 100644 --- a/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts +++ b/apps/wallet/src/hooks/useIssuedAndBurntTokens.ts @@ -19,7 +19,9 @@ const useIssuedAndBurntTokens = ( tx: wasm.UnsignedTransaction | wasm.Transaction | undefined, boxes: Array, ) => { - const [mapped, setMapped] = useState>(new Map()); + const [mapped, setMapped] = useState>( + new Map(), + ); const [issued, setIssued] = useState>([]); const [burnt, setBurnt] = useState>([]); const [storedTxId, setStoredTxId] = useState(''); @@ -49,7 +51,7 @@ const useIssuedAndBurntTokens = ( } else if (amount < 0n) { burntTokens.push({ tokenId, amount: -amount }); } - if(amount !== 0n){ + if (amount !== 0n) { mappedTokens.set(tokenId, amount); } } diff --git a/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx b/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx index a46fcd7..546508a 100644 --- a/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx +++ b/apps/wallet/src/pages/wallet-page/asset/AssetItemDetail.tsx @@ -37,7 +37,9 @@ const AssetItemDetail = (props: AssetItemDetailPropsType) => { - {props.balance ? : null} + {props.balance ? ( + + ) : null} { const details = useAssetDetail(props.id, props.networkType); + const [showDetail, setShowDetail] = useState(false); if (props.amount === 0n) return null; const color = getValueColor(props.amount); - const [showDetail, setShowDetail] = useState(false); - const getLabel = () => props.amount > 0 ? (props.issueAndBurn ? 'Issued' : 'Received') : (props.issueAndBurn ? 'Burnt': 'Sent'); + const getLabel = () => + props.amount > 0 + ? props.issueAndBurn + ? 'Issued' + : 'Received' + : props.issueAndBurn + ? 'Burnt' + : 'Sent'; return ( @@ -37,11 +44,7 @@ const TxAssetDetail = (props: TxAssetDetailPropsType) => { - + { } txId={details.txId} handleClose={() => setShowDetail(false)} - /> + /> - ); }; From 960308fd2b5c9dd6f5f6c5fa2b4fe442fcef4209 Mon Sep 17 00:00:00 2001 From: vorujack Date: Fri, 27 Sep 2024 13:59:49 +0330 Subject: [PATCH 5/5] add changeset --- .changeset/stale-suits-share.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stale-suits-share.md diff --git a/.changeset/stale-suits-share.md b/.changeset/stale-suits-share.md new file mode 100644 index 0000000..df6cdb2 --- /dev/null +++ b/.changeset/stale-suits-share.md @@ -0,0 +1,5 @@ +--- +'minotaur-wallet': minor +--- + +Add Transaction Display page