fix(wallet/webui): bindings 1.4.1, slightly improve copy address

Cargo.toml

@@ -1,6 +1,6 @@
 # NOTE: When editing this version, also edit the versions in template_built_in/templates/account and account_nft
 [workspace.package]
-version = "0.8.1"
+version = "0.8.2"
 edition = "2021"
 authors = ["The Tari Development Community"]
 repository = "https://github.com/tari-project/tari-dan"

applications/tari_dan_wallet_web_ui/src/Components/CopyAddress.tsx

@@ -0,0 +1,45 @@
+//  Copyright 2022. The Tari Project
+//
+//  Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+//  following conditions are met:
+//
+//  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following
+//  disclaimer.
+//
+//  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+//  following disclaimer in the documentation and/or other materials provided with the distribution.
+//
+//  3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote
+//  products derived from this software without specific prior written permission.
+//
+//  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+//  INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+//  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+//  SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+//  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+//  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 { SubstateId, shortenString } from "@tari-project/typescript-bindings";
+import { shortenSubstateId, substateIdToString } from "../utils/helpers";
+import CopyToClipboard from "./CopyToClipboard";
+
+interface Props {
+  address: SubstateId | string;
+  display?: SubstateId | string;
+}
+
+export default function CopyAddress({ address, display }: Props) {
+  const [shortAddress, addressString] =
+    typeof address === "object"
+      ? [shortenSubstateId(address), substateIdToString(address)]
+      : [shortenString(address), address];
+  const displayStr = display && (typeof display === "object" ? shortenSubstateId(display) : display);
+
+  return (
+    <>
+      <span title={addressString}>{displayStr || shortAddress}</span>
+      <CopyToClipboard copy={addressString} />
+    </>
+  );
+}

applications/tari_dan_wallet_web_ui/src/Components/CopyToClipboard.tsx

@@ -32,12 +32,17 @@ interface CopyProps {
 }
 
 const CopyToClipboard = ({ copy, floatright, title }: CopyProps) => {
-  const [open, setOpen] = useState(false);
-  const handleClick = (copyThis: string) => {
-    setOpen(true);
-    navigator.clipboard.writeText(copyThis);
+  const [tooltip, setTooltip] = useState<string | null>(null);
+  const handleClick = async (copyThis: string) => {
+    try {
+      await navigator.clipboard.writeText(copyThis);
+      setTooltip("Copied to clipboard");
+    } catch (err) {
+      setTooltip("Permission denied to copy");
+      console.log(err);
+    }
     setTimeout(() => {
-      setOpen(false);
+      setTooltip(null);
     }, 2000);
   };
 
@@ -53,7 +58,7 @@ const CopyToClipboard = ({ copy, floatright, title }: CopyProps) => {
             : { marginLeft: "10px", marginRight: "10px" }
         }
       >
-        <Tooltip title={!open ? title || copy : "Copied to clipboard"} arrow>
+        <Tooltip title={tooltip ? tooltip : title || copy} arrow>
           <ContentCopyIcon
             color="primary"
             style={{

applications/tari_dan_wallet_web_ui/src/routes/AccountDetails/AccountDetails.tsx

@@ -31,19 +31,17 @@ import TableCell from "@mui/material/TableCell";
 import TableBody from "@mui/material/TableBody";
 import { useParams } from "react-router-dom";
 import { useAccountsGetBalances, useAccountsGet, useAccountNFTsList } from "../../api/hooks/useAccounts";
-import { shortenString } from "../../utils/helpers";
 import { DataTableCell } from "../../Components/StyledComponents";
-import CopyToClipboard from "../../Components/CopyToClipboard";
 import FetchStatusCheck from "../../Components/FetchStatusCheck";
-import { substateIdToString, BalanceEntry } from "@tari-project/typescript-bindings";
+import { BalanceEntry } from "@tari-project/typescript-bindings";
 import NFTList from "../../Components/NFTList";
+import CopyAddress from "../../Components/CopyAddress";
 
 function BalanceRow(props: BalanceEntry) {
   return (
     <TableRow key={props.resource_address}>
       <DataTableCell>
-        {shortenString(props.token_symbol || props.resource_address)}
-        <CopyToClipboard copy={props.token_symbol || props.resource_address} />
+        <CopyAddress address={props.resource_address} display={props.token_symbol || props.resource_address} />
       </DataTableCell>
       <DataTableCell>{props.resource_type}</DataTableCell>
       <DataTableCell>{props.balance}</DataTableCell>
@@ -101,12 +99,10 @@ function AccountDetailsLayout() {
                     <TableRow>
                       <DataTableCell>{accountsData.account.name}</DataTableCell>
                       <DataTableCell>
-                        {shortenString(substateIdToString(accountsData.account.address))}
-                        <CopyToClipboard copy={substateIdToString(accountsData.account.address)} />
+                        <CopyAddress address={accountsData.account.address} />
                       </DataTableCell>
                       <DataTableCell>
-                        {shortenString(accountsData.public_key)}
-                        <CopyToClipboard copy={accountsData.public_key} />
+                        <CopyAddress address={accountsData.public_key} />
                       </DataTableCell>
                     </TableRow>
                   )}

applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/AccountDetails.tsx

@@ -21,13 +21,10 @@
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import Box from "@mui/material/Box";
-import CopyToClipboard from "../../../Components/CopyToClipboard";
-import FetchStatusCheck from "../../../Components/FetchStatusCheck";
 import { GridHeadCell, GridDataCell } from "../../../Components/StyledComponents";
-import { useAccountsGet } from "../../../api/hooks/useAccounts";
-import { shortenString, shortenSubstateId, substateIdToString } from "../../../utils/helpers";
 import { styled } from "@mui/material/styles";
 import useAccountStore from "../../../store/accountStore";
+import CopyAddress from "../../../Components/CopyAddress";
 
 const GridContainer = styled(Box)(({ theme }) => ({
   display: "grid",
@@ -57,12 +54,10 @@ function AccountDetails() {
       <GridHeadCell className="head3">Public Key</GridHeadCell>
       <GridDataCell className="content1">{account.name}</GridDataCell>
       <GridDataCell className="content2">
-        {shortenSubstateId(account.address)}
-        <CopyToClipboard copy={substateIdToString(account.address)} />
+        <CopyAddress address={account.address} />
       </GridDataCell>
       <GridDataCell className="content3">
-        {shortenString(publicKey)}
-        <CopyToClipboard copy={publicKey} />
+        <CopyAddress address={publicKey} />
       </GridDataCell>
     </GridContainer>
   );

applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/Assets.tsx

@@ -31,16 +31,16 @@ import TableRow from "@mui/material/TableRow";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
 import { useState } from "react";
-import CopyToClipboard from "../../../Components/CopyToClipboard";
 import FetchStatusCheck from "../../../Components/FetchStatusCheck";
 import { DataTableCell } from "../../../Components/StyledComponents";
 import { useAccountNFTsList, useAccountsGetBalances } from "../../../api/hooks/useAccounts";
 import useAccountStore from "../../../store/accountStore";
-import { shortenString, shortenSubstateId, substateIdToString } from "../../../utils/helpers";
+import { shortenSubstateId, substateIdToString } from "../../../utils/helpers";
 import NFTList from "../../../Components/NFTList";
 import { Button } from "@mui/material";
 import { SendMoneyDialog } from "./SendMoney";
 import { ResourceAddress, ResourceType, VaultId, BalanceEntry, Account } from "@tari-project/typescript-bindings";
+import CopyAddress from "../../../Components/CopyAddress";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -65,14 +65,13 @@ function BalanceRow(props: BalanceRowProps) {
   return (
     <TableRow key={token_symbol || resource_address}>
       <DataTableCell>
-        <span title={vault_address}>{shortenSubstateId(vault_address)}</span>
-        <CopyToClipboard copy={substateIdToString(vault_address)} title="Copy vault address" />
+        <CopyAddress address={vault_address} />
       </DataTableCell>
       <DataTableCell>
-        <span title={resource_address}>
-          {token_symbol || shortenSubstateId(resource_address)} {resource_type}
-        </span>
-        <CopyToClipboard copy={resource_address} title="Copy resource address" />
+        <CopyAddress
+          address={resource_address}
+          display={`${token_symbol || shortenSubstateId(resource_address)} ${resource_type}`}
+        />
       </DataTableCell>
       <DataTableCell>{showBalance ? balance : "*************"}</DataTableCell>
       <DataTableCell>

applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/ClaimFees.tsx

@@ -40,6 +40,7 @@ import {
   GetValidatorFeesResponse,
   rejectReasonToString,
   substateIdToString,
+  TransactionResult,
 } from "@tari-project/typescript-bindings";
 import { FileContent } from "use-file-picker/types";
 import { toHexString } from "../../../utils/helpers";
@@ -152,7 +153,9 @@ export default function ClaimFees() {
           setPopup({
             title: "Claim failed",
             error: true,
-            message: rejectReasonToString(getRejectReasonFromTransactionResult(resp.result.result)),
+            message: rejectReasonToString(
+              getRejectReasonFromTransactionResult(resp.result.result as TransactionResult),
+            ),
           });
         }
       })

applications/tari_dan_wallet_web_ui/src/routes/Transactions/Events.tsx

@@ -23,13 +23,12 @@
 import { useState } from "react";
 import { TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Collapse } from "@mui/material";
 import { DataTableCell, AccordionIconButton } from "../../Components/StyledComponents";
-import { shortenString, shortenSubstateId, substateIdToString } from "../../utils/helpers";
-import CopyToClipboard from "../../Components/CopyToClipboard";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import CodeBlockExpand from "../../Components/CodeBlock";
 import { useTheme } from "@mui/material/styles";
 import type { Event } from "@tari-project/typescript-bindings";
+import CopyAddress from "../../Components/CopyAddress";
 
 function RowData({ substate_id, template_address, topic, tx_hash, payload }: Event, index: number) {
   const [open, setOpen] = useState(false);
@@ -49,18 +48,9 @@ function RowData({ substate_id, template_address, topic, tx_hash, payload }: Eve
           </AccordionIconButton>
         </DataTableCell>
         <DataTableCell>{topic}</DataTableCell>
-        <DataTableCell>
-          {shortenSubstateId(substate_id)}
-          {substate_id && <CopyToClipboard copy={substateIdToString(substate_id)} />}
-        </DataTableCell>
-        <DataTableCell>
-          {shortenString(template_address)}
-          {template_address && <CopyToClipboard copy={template_address} />}
-        </DataTableCell>
-        <DataTableCell>
-          {shortenString(tx_hash)}
-          {tx_hash && <CopyToClipboard copy={tx_hash} />}
-        </DataTableCell>
+        <DataTableCell>{substate_id ? <CopyAddress address={substate_id} /> : "--"}</DataTableCell>
+        <DataTableCell>{template_address ? <CopyAddress address={template_address} /> : "--"}</DataTableCell>
+        <DataTableCell>{tx_hash ? <CopyAddress address={tx_hash} /> : "--"}</DataTableCell>
       </TableRow>
       <TableRow>
         <DataTableCell

applications/tari_dan_wallet_web_ui/src/routes/Wallet/Components/AccessTokens.tsx

@@ -44,13 +44,12 @@ import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
 import { useState } from "react";
 import { IoCloseCircleOutline } from "react-icons/io5";
-import CopyToClipboard from "../../../Components/CopyToClipboard";
 import FetchStatusCheck from "../../../Components/FetchStatusCheck";
 import { AccordionIconButton, CodeBlock, DataTableCell } from "../../../Components/StyledComponents";
 import { useAuthRevokeToken, useGetAllTokens } from "../../../api/hooks/useTokens";
-import { shortenString } from "../../../utils/helpers";
 import type { Claims, JrpcPermission, JrpcPermissions } from "@tari-project/typescript-bindings";
 import { jrpcPermissionToString } from "@tari-project/typescript-bindings";
+import CopyAddress from "../../../Components/CopyAddress";
 
 function AlertDialog({ fn, row }: any) {
   const [open, setOpen] = useState(false);
@@ -145,8 +144,7 @@ export default function AccessTokens() {
               borderBottom: "none",
             }}
           >
-            {shortenString(name)}
-            <CopyToClipboard copy={name} />
+            <CopyAddress address={name} />
           </DataTableCell>
           <DataTableCell
             style={{

applications/tari_dan_wallet_web_ui/src/routes/Wallet/Components/Accounts.tsx

@@ -21,9 +21,8 @@
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import { useState } from "react";
-import { Form, Link, useLocation } from "react-router-dom";
+import { Form, Link } from "react-router-dom";
 import AddIcon from "@mui/icons-material/Add";
-import Alert from "@mui/material/Alert";
 import Button from "@mui/material/Button/Button";
 import Fade from "@mui/material/Fade";
 import MenuItem from "@mui/material/MenuItem";
@@ -35,7 +34,6 @@ import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TextField from "@mui/material/TextField/TextField";
-import CopyToClipboard from "../../../Components/CopyToClipboard";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import { ChevronRight } from "@mui/icons-material";
@@ -49,7 +47,8 @@ import {
 } from "../../../api/hooks/useAccounts";
 import FetchStatusCheck from "../../../Components/FetchStatusCheck";
 import queryClient from "../../../api/queryClient";
-import { AccountInfo, substateIdToString, shortenString, shortenSubstateId } from "@tari-project/typescript-bindings";
+import { AccountInfo, substateIdToString, shortenSubstateId } from "@tari-project/typescript-bindings";
+import CopyAddress from "../../../Components/CopyAddress";
 
 function Account(account: AccountInfo, index: number) {
   return (
@@ -66,13 +65,11 @@ function Account(account: AccountInfo, index: number) {
         </Link>
       </DataTableCell>
       <DataTableCell>
-        {shortenSubstateId(account.account.address)}
-        <CopyToClipboard copy={substateIdToString(account.account.address)} />
+        <CopyAddress address={account.account.address} />
       </DataTableCell>
       <DataTableCell>{account.account.key_index}</DataTableCell>
       <DataTableCell>
-        {shortenString(account.public_key)}
-        <CopyToClipboard copy={account.public_key} />
+        <CopyAddress address={account.public_key} />
       </DataTableCell>
       <DataTableCell>
         <IconButton component={Link} to={`/accounts/${substateIdToString(account.account.address)}`}>

applications/tari_indexer_web_ui/src/routes/VN/Components/Connections.tsx

@@ -102,7 +102,7 @@ function Connections() {
               />
               <TextField
                 name="address"
-                label="Address"
+                label="CopyAddress"
                 value={formState.address}
                 onChange={onChange}
                 style={{ flexGrow: 1 }}
@@ -130,7 +130,7 @@ function Connections() {
         <TableHead>
           <TableRow>
             <TableCell>Peer ID</TableCell>
-            <TableCell>Address</TableCell>
+            <TableCell>CopyAddress</TableCell>
             <TableCell>Age</TableCell>
             <TableCell>Direction</TableCell>
             <TableCell>Latency</TableCell>

applications/tari_validator_node_web_ui/src/routes/VN/Components/Connections.tsx

@@ -101,7 +101,7 @@ function Connections() {
               />
               <TextField
                 name="address"
-                label="Address"
+                label="CopyAddress"
                 value={formState.address}
                 onChange={onChange}
                 style={{ flexGrow: 1 }}
@@ -130,7 +130,7 @@ function Connections() {
           <TableHead>
             <TableRow>
               <TableCell>Peer ID</TableCell>
-              <TableCell>Address</TableCell>
+              <TableCell>CopyAddress</TableCell>
               <TableCell>Age</TableCell>
               <TableCell>Direction</TableCell>
               <TableCell>Latency</TableCell>