diff --git a/apps/namadillo/src/App/Transfer/ShieldedPropertiesTooltip.tsx b/apps/namadillo/src/App/Transfer/ShieldedPropertiesTooltip.tsx index 490bbc4073..495998fb52 100644 --- a/apps/namadillo/src/App/Transfer/ShieldedPropertiesTooltip.tsx +++ b/apps/namadillo/src/App/Transfer/ShieldedPropertiesTooltip.tsx @@ -1,8 +1,14 @@ import { Tooltip } from "@namada/components"; +import clsx from "clsx"; import { useMemo } from "react"; import { BsEye, BsEyeSlash } from "react-icons/bs"; +import semiTransparentEye from "./assets/semi-transparent-eye.svg"; +import shieldedEye from "./assets/shielded-eye.svg"; +import transparentEye from "./assets/transparent-eye.svg"; import { isShieldedAddress } from "./common"; +type TransactionType = "transparent" | "semi-transparent" | "shielded"; + export const ShieldedPropertiesTooltip = ({ sourceAddress, destinationAddress, @@ -10,6 +16,20 @@ export const ShieldedPropertiesTooltip = ({ sourceAddress: string | undefined; destinationAddress: string | undefined; }): JSX.Element => { + const isSourceShielded = isShieldedAddress(sourceAddress ?? ""); + const isDestShielded = isShieldedAddress(destinationAddress ?? ""); + + // Determine transaction type + const transactionType: TransactionType = useMemo(() => { + if (isSourceShielded && isDestShielded) { + return "shielded"; + } else if (!isSourceShielded && !isDestShielded) { + return "transparent"; + } else { + return "semi-transparent"; + } + }, [isSourceShielded, isDestShielded]); + const visible = useMemo((): JSX.Element => { return ( @@ -28,32 +48,67 @@ export const ShieldedPropertiesTooltip = ({ ); }, []); - const shieldedTransfer = - isShieldedAddress(sourceAddress ?? "") && - isShieldedAddress(destinationAddress ?? ""); - const shieldingTransfer = - isShieldedAddress(destinationAddress ?? "") && - !isShieldedAddress(sourceAddress ?? ""); + // Determine visibility for each property based on transaction type + const senderVisible = transactionType !== "shielded" && !isSourceShielded; + const recipientVisible = transactionType === "transparent" || !isDestShielded; + const assetVisible = transactionType !== "shielded"; + const amountVisible = transactionType !== "shielded"; + + // Transaction type header + const transactionTypeHeader = useMemo(() => { + return ( +
+ + {transactionType === "shielded" ? + "Shielded" + : transactionType === "semi-transparent" ? + "Semi-transparent" + : "Transparent"} + + { +
+ ); + }, [transactionType]); return ( -
-

Transaction Privacy:

+
+ {transactionTypeHeader} +
Sender address - {shieldedTransfer ? hidden : visible} -
-
- Recipient address - {shieldingTransfer || shieldedTransfer ? hidden : visible} + {senderVisible ? visible : hidden}
Asset - {shieldedTransfer ? hidden : visible} + {assetVisible ? visible : hidden}
Amount - {shieldedTransfer ? hidden : visible} + {amountVisible ? visible : hidden} +
+
+ Destination address + {recipientVisible ? visible : hidden}
diff --git a/apps/namadillo/src/App/Transfer/TransferDestination.tsx b/apps/namadillo/src/App/Transfer/TransferDestination.tsx index 10ed9badae..a176c234ec 100644 --- a/apps/namadillo/src/App/Transfer/TransferDestination.tsx +++ b/apps/namadillo/src/App/Transfer/TransferDestination.tsx @@ -25,7 +25,9 @@ import { useLocation } from "react-router-dom"; import { Address } from "types"; import namadaShieldedIcon from "./assets/namada-shielded.svg"; import namadaTransparentIcon from "./assets/namada-transparent.svg"; +import semiTransparentEye from "./assets/semi-transparent-eye.svg"; import shieldedEye from "./assets/shielded-eye.svg"; +import transparentEye from "./assets/transparent-eye.svg"; import { ConnectProviderButton } from "./ConnectProviderButton"; import { CustomAddressForm } from "./CustomAddressForm"; import { DestinationAddressModal } from "./DestinationAddressModal"; @@ -124,13 +126,6 @@ export const TransferDestination = ({ undefined : destinationAddress; - const isShieldedTransfer = - isShieldedNamAddress(sourceAddress ?? "") && - isShieldedNamAddress(destinationAddress ?? ""); - const isShieldingTransfer = - !isShieldedNamAddress(sourceAddress ?? "") && - isShieldedNamAddress(destinationAddress ?? ""); - const sourceWallet = isNamadaAddress(destinationAddress || "") ? wallets.namada : wallets.keplr; const addressType = @@ -138,6 +133,19 @@ export const TransferDestination = ({ : isTransparentAddress(destinationAddress ?? "") ? "transparent" : "ibc"; + // Determine transaction type for eye icon + const isSourceShielded = isShieldedNamAddress(sourceAddress ?? ""); + const isDestShielded = isShieldedNamAddress(destinationAddress ?? ""); + const transactionType = + isSourceShielded && isDestShielded ? "shielded" + : !isSourceShielded && !isDestShielded ? "transparent" + : "semi-transparent"; + + const eyeIcon = + transactionType === "shielded" ? shieldedEye + : transactionType === "semi-transparent" ? semiTransparentEye + : transparentEye; + return ( <>

Destination

- {(isShieldedTransfer || isShieldingTransfer) && ( + {sourceAddress && destinationAddress && (
Shielded Logo onChangeAmount?.(e.target.value)} placeholder="Amount" diff --git a/apps/namadillo/src/App/Transfer/assets/semi-transparent-eye.svg b/apps/namadillo/src/App/Transfer/assets/semi-transparent-eye.svg new file mode 100644 index 0000000000..a14999b37f --- /dev/null +++ b/apps/namadillo/src/App/Transfer/assets/semi-transparent-eye.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/namadillo/src/App/Transfer/assets/shielded-eye.svg b/apps/namadillo/src/App/Transfer/assets/shielded-eye.svg index fc1d0fa0c7..7620d71c0d 100644 --- a/apps/namadillo/src/App/Transfer/assets/shielded-eye.svg +++ b/apps/namadillo/src/App/Transfer/assets/shielded-eye.svg @@ -1,4 +1,5 @@ - + + diff --git a/apps/namadillo/src/App/Transfer/assets/transparent-eye.svg b/apps/namadillo/src/App/Transfer/assets/transparent-eye.svg new file mode 100644 index 0000000000..d2b94b4dc4 --- /dev/null +++ b/apps/namadillo/src/App/Transfer/assets/transparent-eye.svg @@ -0,0 +1,5 @@ + + + + +