Skip to content

feat(walletui): send flow ux improvements #1570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sdbondi merged 9 commits into from
Sep 11, 2025
Merged

feat(walletui): send flow ux improvements #1570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
faca712
chore: restructure tokens tab
NovaT82 Sep 5, 2025
d44eb73
feat: add stepped send flow
NovaT82 Sep 5, 2025
d94d5e9
fix: build errors
NovaT82 Sep 5, 2025
8710721
feat: improve send flow
NovaT82 Sep 5, 2025
5e218b0
feat: improve send flow
NovaT82 Sep 8, 2025
77c0cb7
feat: improve send flow
NovaT82 Sep 9, 2025
87f98fa
Merge branch 'development' into wallet-ui
NovaT82 Sep 9, 2025
a650b5d
feat: send flow improvements
NovaT82 Sep 10, 2025
7120e7e
Merge branch 'development' into wallet-ui
NovaT82 Sep 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions applications/tari_walletd/web_ui/src/routes/Accounts/Accounts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
// WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
// USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import PageHeading from "../../Components/PageHeading";
import PageHeading from "@components/PageHeading";
import Grid from "@mui/material/Grid";
import { StyledPaper } from "../../Components/StyledComponents";
import { StyledPaper } from "@components/StyledComponents";
import Accounts from "../Wallet/Components/Accounts";

function AccountsLayout() {
Expand Down
30 changes: 13 additions & 17 deletions applications/tari_walletd/web_ui/src/routes/AssetVault/Components/AccountBalance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { useAccountsGetBalances } from "@api/hooks/useAccounts";
import useAccountStore from "@store/accountStore";
import { useEffect } from "react";
import { substateIdToString, bigintToDecimalString } from "@utils/helpers";
import { CURRENCY } from "@utils/constants";
// import { CURRENCY } from "@utils/constants";
import { Account } from "@tari-project/typescript-bindings";

const XTR_RESOURCE = "resource_0101010101010101010101010101010101010101010101010101010101010101";
Expand All @@ -42,26 +42,20 @@ export default function AccountBalance() {

if (!account) return <></>;

return (
<AccountBalanceInner
account={account}
showBalance={showBalance}
setShowBalance={setShowBalance}
/>
);
return <AccountBalanceInner account={account} showBalance={showBalance} setShowBalance={setShowBalance} />;
}

function AccountBalanceInner({
account,
showBalance,
setShowBalance
}: {
account: Account;
showBalance: boolean;
function AccountBalanceInner({
account,
showBalance,
setShowBalance,
}: {
account: Account;
showBalance: boolean;
setShowBalance: (show: boolean) => void;
}) {
const theme = useTheme();

const {
data: balancesData,
isError: balancesIsError,
Expand Down Expand Up @@ -89,6 +83,8 @@ function AccountBalanceInner({
}
}

const symbol = balancesData?.balances.find((b) => b.resource_address === XTR_RESOURCE)?.token_symbol || "";

return (
<FetchStatusCheck
isError={balancesIsError}
Expand All @@ -112,7 +108,7 @@ function AccountBalanceInner({
}}
>
<Typography variant="h2">
{formattedBalance} <span style={{ fontSize: "18px" }}>{CURRENCY.SYMBOL}</span>
{formattedBalance} <span style={{ fontSize: "18px" }}>{symbol}</span>
</Typography>
<IconButton onClick={() => setShowBalance(!showBalance)}>
{showBalance ? (
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/routes/AssetVault/Components/ActionMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { useTheme } from "@mui/material/styles";
import { useAccountsCreateFreeTestCoins } from "@api/hooks/useAccounts";
import ClaimBurn from "./ClaimBurn";
import useAccountStore from "@store/accountStore";
import SendMoney from "./SendMoney";
import SendMoney from "../Tokens/components/SendMoney";
import ClaimFees from "./ClaimFees";
import PublishTemplate from "./PublishTemplate";
import { substateIdToString } from "@tari-project/typescript-bindings";
Expand Down
162 changes: 5 additions & 157 deletions applications/tari_walletd/web_ui/src/routes/AssetVault/Components/Assets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,107 +22,23 @@

import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography";
import React, { useState } from "react";
import FetchStatusCheck from "@components/FetchStatusCheck";
import { DataTableCell } from "@components/StyledComponents";
import { useAccountNFTsList, useAccountsGetBalances } from "@api/hooks/useAccounts";
import { useAccountNFTsList } from "@api/hooks/useAccounts";
import { ApiError } from "@api/helpers/types";
import { useListNfts } from "@api/hooks/useNfts";
import useAccountStore from "@store/accountStore";
import {
bigintToDecimalString,
shortenSubstateId,
substateIdToString,
handleChangePage,
handleChangeRowsPerPage,
} from "@utils/helpers";
import { substateIdToString, handleChangePage, handleChangeRowsPerPage } from "@utils/helpers";
import NFTList from "@routes/AssetVault/NFTs/NFTList";
import { Button } from "@mui/material";
import { SendMoneyDialog } from "./SendMoney";
import {
ResourceAddress,
ResourceType,
VaultId,
BalanceEntry,
Account,
Amount,
} from "@tari-project/typescript-bindings";
import CopyAddress from "@components/CopyAddress";
import { Account } from "@tari-project/typescript-bindings";
import Tokens from "@routes/AssetVault/Tokens/Tokens";

interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}

interface BalanceRowProps {
token_symbol: string;
resource_address: ResourceAddress;
resource_type: ResourceType;
vault_address?: VaultId;
balance: Amount;
confidential_balance: Amount;
divisibility: number;
onSendClicked?: (resource_address: ResourceAddress, resource_type: ResourceType) => void;
}

function BalanceRow(props: BalanceRowProps) {
const {
token_symbol,
resource_address,
resource_type,
balance,
confidential_balance,
vault_address,
divisibility,
onSendClicked,
} = props;
const showBalance = useAccountStore((state) => state.showBalance);
return (
<TableRow key={token_symbol || resource_address}>
<DataTableCell>{vault_address ? <CopyAddress address={vault_address} /> : "--"}</DataTableCell>
<DataTableCell>
<CopyAddress
address={resource_address}
display={`${token_symbol || shortenSubstateId(resource_address)} ${resource_type}`}
/>
</DataTableCell>
<DataTableCell>{showBalance ? bigintToDecimalString(balance, divisibility) : "*************"}</DataTableCell>
<DataTableCell>
<ConfidentialBalance
show={showBalance}
resourceType={resource_type}
balance={confidential_balance}
divisibility={divisibility}
/>
</DataTableCell>
<DataTableCell>
<Button variant="outlined" onClick={() => onSendClicked?.(resource_address, resource_type)}>
Send
</Button>
</DataTableCell>
</TableRow>
);
}

function ConfidentialBalance(props: { show: boolean; balance: Amount; resourceType: string; divisibility: number }) {
switch (props.resourceType) {
case "Confidential":
case "Stealth":
return <>{props.show ? bigintToDecimalString(props.balance, props.divisibility) : "**************"}</>;
default:
return <>--</>;
}
}

function TabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;

Expand Down Expand Up @@ -152,10 +68,6 @@ function tabProps(index: number) {

function Assets({ account }: { account: Account }) {
const [assetTab, setAssetTab] = useState(0);
const [resourceToSend, setResourceToSend] = useState<{
address: ResourceAddress;
resource_type: ResourceType;
} | null>(null);
const [nftPage, setNftPage] = useState(0);
const [nftRowsPerPage, setNftRowsPerPage] = useState(12);

Expand All @@ -165,13 +77,6 @@ function Assets({ account }: { account: Account }) {
setAssetTab(0);
}, [account]);

const {
data: balancesData,
isError: balancesIsError,
error: balancesError,
isFetching: balancesIsFetching,
} = useAccountsGetBalances(substateIdToString(account.address));

const {
data: nftsListData,
isError: nftsListIsError,
Expand All @@ -195,73 +100,16 @@ function Assets({ account }: { account: Account }) {
setAssetTab(newValue);
};

const handleSendResourceClicked = (address: ResourceAddress, resource_type: ResourceType) => {
setResourceToSend({ address, resource_type });
};

return (
<Box sx={{ width: "100%" }}>
<SendMoneyDialog
open={resourceToSend !== null}
handleClose={() => setResourceToSend(null)}
onSendComplete={() => setResourceToSend(null)}
resource_address={resourceToSend?.address}
resource_type={resourceToSend?.resource_type!}
/>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs value={assetTab} onChange={handleChange} aria-label="account assets" variant="standard">
<Tab label="Tokens" {...tabProps(0)} style={{ width: 150 }} />
<Tab label="NFTs" {...tabProps(1)} style={{ width: 150 }} />
</Tabs>
</Box>
<TabPanel value={assetTab} index={0}>
<FetchStatusCheck
isError={balancesIsError}
errorMessage={balancesError?.message || "Error fetching data"}
isLoading={balancesIsFetching && !balancesData?.balances.length}
>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Vault</TableCell>
<TableCell>Resource</TableCell>
<TableCell>Revealed Balance</TableCell>
<TableCell>Confidential Balance</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{balancesData?.balances.map(
(
{
resource_address,
balance,
resource_type,
confidential_balance,
token_symbol,
vault_address,
divisibility,
}: BalanceEntry,
i: number,
) => (
<BalanceRow
key={i}
token_symbol={token_symbol || ""}
resource_address={resource_address}
resource_type={resource_type}
balance={balance}
confidential_balance={confidential_balance}
vault_address={vault_address ?? undefined} // convert null to undefined
divisibility={divisibility}
onSendClicked={handleSendResourceClicked}
/>
),
)}
</TableBody>
</Table>
</TableContainer>
</FetchStatusCheck>
<Tokens account={account} />
</TabPanel>
<TabPanel value={assetTab} index={1}>
<NFTList
Expand Down
Loading
Loading