Merge branch 'update-display-transaction' into 'dev'

Update display transaction

See merge request ergo/minotaur/minotaur-wallet!37

.changeset/stale-suits-share.md

@@ -0,0 +1,5 @@
+---
+'minotaur-wallet': minor
+---
+
+Add Transaction Display page

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) => {
         </Typography>
       </div>
       {Object.entries(txValues.tokens).map((item) => (
-        <TxAssetDetail
-          amount={-item[1]}
-          id={item[0]}
-          networkType={wallet.networkType}
-          key={item[0]}
-        />
-      ))}
-      {issuedAndBurnt.burnt.length > 0 ? (
         <React.Fragment>
-          <Typography variant="body2" color="textSecondary" mt={2}>
-            Burnt tokens
-          </Typography>
-          <Stack sx={{ mb: 2, mt: 1 }} gap={0.5}>
-            {issuedAndBurnt.burnt.map((item) => (
-              <IssuedBurntTokenAmount
-                key={item.tokenId}
-                tokenId={item.tokenId}
-                amount={item.amount}
-                networkType={wallet.networkType}
-                color={'error'}
-              />
-            ))}
-          </Stack>
+          <TxAssetDetail
+            amount={mapped.get(item[0]) ?? 0n}
+            id={item[0]}
+            networkType={wallet.networkType}
+            key={'ib-' + item[0]}
+            issueAndBurn={true}
+          />
+          <TxAssetDetail
+            amount={-item[1] - (mapped.get(item[0]) ?? 0n)}
+            id={item[0]}
+            networkType={wallet.networkType}
+            key={'rs-' + item[0]}
+          />
         </React.Fragment>
-      ) : null}
-      {issuedAndBurnt.issued.length > 0 ? (
-        <React.Fragment>
-          <Typography variant="body2" color="textSecondary" mt={2}>
-            Issued tokens
-          </Typography>
-          <Stack sx={{ mb: 2, mt: 1 }} gap={0.5}>
-            {issuedAndBurnt.issued.map((item) => (
-              <IssuedBurntTokenAmount
-                key={item.tokenId}
-                tokenId={item.tokenId}
-                amount={item.amount}
-                networkType={wallet.networkType}
-                color={'success'}
-              />
-            ))}
-          </Stack>
-        </React.Fragment>
-      ) : null}
+      ))}
     </React.Fragment>
   );
 };

apps/wallet/src/hooks/useIssuedAndBurntTokens.ts

@@ -19,6 +19,9 @@ const useIssuedAndBurntTokens = (
   tx: wasm.UnsignedTransaction | wasm.Transaction | undefined,
   boxes: Array<wasm.ErgoBox>,
 ) => {
+  const [mapped, setMapped] = useState<Map<string, bigint>>(
+    new Map<string, bigint>(),
+  );
   const [issued, setIssued] = useState<Array<TokenType>>([]);
   const [burnt, setBurnt] = useState<Array<TokenType>>([]);
   const [storedTxId, setStoredTxId] = useState('');
@@ -41,20 +44,25 @@ const useIssuedAndBurntTokens = (
       }
       const issuedTokens: Array<TokenType> = [];
       const burntTokens: Array<TokenType> = [];
+      const mappedTokens: Map<string, bigint> = new Map<string, bigint>();
       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;

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;
@@ -37,7 +37,9 @@ const AssetItemDetail = (props: AssetItemDetailPropsType) => {
 
       <Stack spacing={2} sx={{ mt: 3 }}>
         <DisplayProperty label="Emission amount" value={props.emissionAmount} />
-        <DisplayProperty label="Balance" value={props.balance} />
+        {props.balance ? (
+          <DisplayProperty label="Balance" value={props.balance} />
+        ) : null}
         <DisplayProperty
           label="Token Id"
           value={props.id}

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.
       </FormHelperText>
       <UnBalancedTokensAmount
-        amounts={issuedAndBurnt.burnt}
+        amounts={burnt}
         color="error"
         label="Burning"
         networkType={props.wallet.networkType}
       />
       <UnBalancedTokensAmount
-        amounts={issuedAndBurnt.issued}
+        amounts={issued}
         color="success"
         label="Issuing"
         networkType={props.wallet.networkType}

apps/wallet/src/pages/wallet-page/transaction/TxAssetDetail.tsx

@@ -1,19 +1,31 @@
 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;
+  issueAndBurn?: boolean;
 }
 const TxAssetDetail = (props: TxAssetDetailPropsType) => {
   const details = useAssetDetail(props.id, props.networkType);
+  const [showDetail, setShowDetail] = useState(false);
   if (props.amount === 0n) return null;
   const color = getValueColor(props.amount);
+  const getLabel = () =>
+    props.amount > 0
+      ? props.issueAndBurn
+        ? 'Issued'
+        : 'Received'
+      : props.issueAndBurn
+        ? 'Burnt'
+        : 'Sent';
   return (
     <React.Fragment>
       <Box sx={{ float: 'left', mr: 2 }}>
@@ -25,18 +37,38 @@ const TxAssetDetail = (props: TxAssetDetailPropsType) => {
           <Avatar alt={details.name} src="/" />
         )}
       </Box>
-      <Box display="flex">
+      <Box display="flex" onClick={() => setShowDetail(true)}>
         <Typography sx={{ flexGrow: 1 }}>{details.name}</Typography>
         <Typography color={color}>
           {props.amount > 0 ? '+' : ''}
           <TokenAmountDisplay amount={props.amount} decimal={details.decimal} />
         </Typography>
       </Box>
-      <DisplayId
-        variant="body2"
-        color={color}
-        id={props.amount > 0 ? 'Received' : 'Sent'}
-      />
+      <DisplayId variant="body2" color={color} id={getLabel()} />
+      <Drawer
+        anchor="bottom"
+        open={showDetail}
+        onClose={() => setShowDetail(false)}
+      >
+        <AssetItemDetail
+          id={props.id}
+          logo={details.logo}
+          name={details.name}
+          description={details.description}
+          emissionAmount={
+            details.emissionAmount > 0n ? (
+              <TokenAmountDisplay
+                amount={details.emissionAmount}
+                decimal={details.decimal}
+              />
+            ) : (
+              '?'
+            )
+          }
+          txId={details.txId}
+          handleClose={() => setShowDetail(false)}
+        />
+      </Drawer>
     </React.Fragment>
   );
 };