diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json index a1a1598b1b..8293bcb772 100644 --- a/apps/namadillo/package.json +++ b/apps/namadillo/package.json @@ -10,7 +10,7 @@ "@chain-registry/client": "^1.53.5", "@cosmjs/encoding": "^0.32.3", "@keplr-wallet/types": "^0.12.136", - "@namada/chain-registry": "^1.5.1", + "@namada/chain-registry": "^1.5.2", "@namada/indexer-client": "4.0.5", "@namada/sdk-multicore": "0.22.0", "@tailwindcss/container-queries": "^0.1.1", diff --git a/apps/namadillo/src/App/AccountOverview/EstimateShieldingRewardsCard.tsx b/apps/namadillo/src/App/AccountOverview/EstimateShieldingRewardsCard.tsx index c5b4f6d482..4ad12d18d2 100644 --- a/apps/namadillo/src/App/AccountOverview/EstimateShieldingRewardsCard.tsx +++ b/apps/namadillo/src/App/AccountOverview/EstimateShieldingRewardsCard.tsx @@ -3,7 +3,6 @@ import { ModalContainer } from "App/Common/ModalContainer"; import { NamCurrency } from "App/Common/NamCurrency"; import { MaspRewardCalculator } from "App/Sidebars/MaspRewardCalculator"; import { cachedShieldedRewardsAtom } from "atoms/balance"; -import { applicationFeaturesAtom } from "atoms/settings"; import clsx from "clsx"; import { useAtomValue } from "jotai"; import { useState } from "react"; @@ -12,7 +11,6 @@ import { FaCalculator } from "react-icons/fa6"; export const EstimateShieldingRewardsCard = (): JSX.Element => { const shieldedRewards = useAtomValue(cachedShieldedRewardsAtom); const [isModalOpen, setIsModalOpen] = useState(false); - const features = useAtomValue(applicationFeaturesAtom); const handleCloseModal = (): void => { setIsModalOpen(false); @@ -47,18 +45,16 @@ export const EstimateShieldingRewardsCard = (): JSX.Element => { } - {features.shieldingRewardsEnabled && ( -
- - Masp Rewards Calculator - +
+ + Masp Rewards Calculator + - -
- )} + +
{isModalOpen && ( diff --git a/apps/namadillo/src/App/AccountOverview/UnshieldedAssetTable.tsx b/apps/namadillo/src/App/AccountOverview/UnshieldedAssetTable.tsx index 29416f9e4a..35b9402f83 100644 --- a/apps/namadillo/src/App/AccountOverview/UnshieldedAssetTable.tsx +++ b/apps/namadillo/src/App/AccountOverview/UnshieldedAssetTable.tsx @@ -4,12 +4,14 @@ import { TableRow, Tooltip, } from "@namada/components"; +import { AccountType } from "@namada/types"; import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary"; import { FiatCurrency } from "App/Common/FiatCurrency"; import { TableWithPaginator } from "App/Common/TableWithPaginator"; import { TokenCard } from "App/Common/TokenCard"; import { TokenCurrency } from "App/Common/TokenCurrency"; import { params, routes } from "App/routes"; +import { allDefaultAccountsAtom } from "atoms/accounts"; import { transparentTokensAtom } from "atoms/balance/atoms"; import { tokenPricesFamily } from "atoms/prices/atoms"; import { applicationFeaturesAtom } from "atoms/settings"; @@ -17,7 +19,6 @@ import { useBalances } from "hooks/useBalances"; import { useAtomValue } from "jotai"; import { useEffect, useMemo, useState } from "react"; import { IoSwapHorizontal } from "react-icons/io5"; -import { TbVectorTriangle } from "react-icons/tb"; import { Link } from "react-router-dom"; import { twMerge } from "tailwind-merge"; import { TokenBalance } from "types"; @@ -35,6 +36,15 @@ const TransparentTokensTable = ({ const [page, setPage] = useState(initialPage); const { namTransfersEnabled } = useAtomValue(applicationFeaturesAtom); const { bondedAmount } = useBalances(); + const { data: accounts } = useAtomValue(allDefaultAccountsAtom); + const transparentAccount = accounts?.find( + (account) => account.type !== AccountType.ShieldedKeys + ); + const shieldedAccount = accounts?.find( + (account) => account.type === AccountType.ShieldedKeys + ); + const shieldedAddress = shieldedAccount?.address; + const destinationAddress = transparentAccount?.address; // Get token prices for calculating staked balance dollar amounts const tokenAddresses = useMemo( @@ -102,7 +112,7 @@ const TransparentTokensTable = ({
Shield @@ -128,12 +138,6 @@ const TransparentTokensTable = ({ url: `${routes.transfer}?${params.asset}=${address}&${params.shielded}=0`, icon: , }, - { - url: `${routes.ibcWithdraw}?${params.asset}=${address}`, - icon: ( - - ), - }, ].map(({ url, icon }) => (
{ @@ -69,7 +63,6 @@ export const MainRoutes = (): JSX.Element => { > {/* Home */} } /> - {/* Staking */} } /> { path={routes.stakingBondingRedelegate} element={} /> - + {/* Receive */} + } /> {/* Governance */} } /> { } /> } /> - {/* Masp */} - {features.maspEnabled && ( - }> - } /> - } /> - - )} - - {/* Ibc Transfers */} - {features.ibcTransfersEnabled && ( - }> - } /> - } /> - - )} - {features.ibcTransfersEnabled && ( }> } /> )} - - {/* Transfer */} - {(features.maspEnabled || features.namTransfersEnabled) && ( - }> - } /> - - )} + {/* Transfer - All transfer types now handled by TransferLayout */} + }> + } /> + } /> + } /> + } /> + } /> + {/* Transaction History */} {(features.namTransfersEnabled || features.ibcTransfersEnabled) && ( @@ -130,7 +109,6 @@ export const MainRoutes = (): JSX.Element => { /> )} - {/* Other */} } /> } /> diff --git a/apps/namadillo/src/App/Common/SelectModal.tsx b/apps/namadillo/src/App/Common/SelectModal.tsx index 47f40bcc44..a453f784f5 100644 --- a/apps/namadillo/src/App/Common/SelectModal.tsx +++ b/apps/namadillo/src/App/Common/SelectModal.tsx @@ -31,7 +31,7 @@ export const SelectModal = ({ )} {...props} > -
+
{title}
- {children} +
{children}
diff --git a/apps/namadillo/src/App/Common/SidebarMenuItem.tsx b/apps/namadillo/src/App/Common/SidebarMenuItem.tsx index aa080184f7..fedcef554f 100644 --- a/apps/namadillo/src/App/Common/SidebarMenuItem.tsx +++ b/apps/namadillo/src/App/Common/SidebarMenuItem.tsx @@ -24,7 +24,7 @@ export const SidebarMenuItem = ({ url, children }: Props): JSX.Element => { to={url} className={({ isActive }) => clsx(className, { - "text-yellow font-bold": isActive, + "text-yellow font-bold pointer-events-none select-none": isActive, }) } > diff --git a/apps/namadillo/src/App/Common/TransactionFee.tsx b/apps/namadillo/src/App/Common/TransactionFee.tsx index 868d7bcfa8..58983e3417 100644 --- a/apps/namadillo/src/App/Common/TransactionFee.tsx +++ b/apps/namadillo/src/App/Common/TransactionFee.tsx @@ -11,8 +11,10 @@ export const TransactionFee = ({ symbol, }: TransactionFeeProps): JSX.Element => { return ( -
- Fee: +
+ + Transaction Fee +
-
Fee Options:
+
Fees:
diff --git a/apps/namadillo/src/App/Common/UnshieldAssetsModal.tsx b/apps/namadillo/src/App/Common/UnshieldAssetsModal.tsx index 6cd521f7e2..5bc3c6d6ae 100644 --- a/apps/namadillo/src/App/Common/UnshieldAssetsModal.tsx +++ b/apps/namadillo/src/App/Common/UnshieldAssetsModal.tsx @@ -39,7 +39,7 @@ export const UnshieldAssetsModal = ({ ), - onClick: () => goTo(routes.unshield), + onClick: () => goTo(routes.maspUnshield), children: "Unshield assets from your Namada shielded to transparent account", }, diff --git a/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx b/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx index c5ce10bb61..c45fa300b7 100644 --- a/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx +++ b/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx @@ -2,7 +2,6 @@ import { Chain } from "@chain-registry/types"; import { Panel } from "@namada/components"; import { useAssetAmount } from "hooks/useAssetAmount"; import { useWalletManager } from "hooks/useWalletManager"; -import { wallets } from "integrations"; import { KeplrWalletManager } from "integrations/Keplr"; import { useState } from "react"; import { Asset } from "types"; @@ -41,7 +40,6 @@ export const IbcShieldAll: React.FC = () => { {connected && !isSuccess && ( { - const navigate = useNavigate(); +interface IbcTransferProps { + sourceAddress: string; + setSourceAddress: (address?: string) => void; + destinationAddress: string; + setDestinationAddress: (address?: string) => void; + keplrWalletManager: KeplrWalletManager; + assetSelectorModalOpen?: boolean; + setAssetSelectorModalOpen?: (open: boolean) => void; +} + +export const IbcTransfer = ({ + sourceAddress, + setSourceAddress, + destinationAddress, + setDestinationAddress, + keplrWalletManager, + assetSelectorModalOpen, + setAssetSelectorModalOpen, +}: IbcTransferProps): JSX.Element => { + // COMPONENT STATE const [completedAt, setCompletedAt] = useState(); - - const availableChains = useMemo(getAvailableChains, []); - - // Global & Atom states + const [sourceChannel, setSourceChannel] = useState(""); + const [destinationChannel, setDestinationChannel] = useState(""); + const [selectedAssetWithAmount, setSelectedAssetWithAmount] = useState< + AssetWithAmountAndChain | undefined + >(); + const [amount, setAmount] = useAtom(transferAmountAtom); + const [txHash, setTxHash] = useState(); + // ERROR & STATUS STATE + const [generalErrorMessage, setGeneralErrorMessage] = useState(""); + const [currentStatus, setCurrentStatus] = useState(); + // GLOBAL STATE + const navigate = useNavigate(); const defaultAccounts = useAtomValue(allDefaultAccountsAtom); - - // Wallet & Registry - const { - registry, - walletAddress: sourceAddress, - connectToChainId, - } = useWalletManager(keplr); - const namadaChainRegistry = useAtomValue(namadaChainRegistryAtom); - const chainRegistry = namadaChainRegistry.data; - - // IBC Channels & Balances + const { registry } = useWalletManager(keplrWalletManager); const { data: ibcChannels, isError: unknownIbcChannels, isLoading: isLoadingIbcChannels, } = useAtomValue(ibcChannelsFamily(registry?.chain.chain_name)); - - const { data: userAssets, isLoading: isLoadingBalances } = useAtomValue( + const { data: userAssets } = useAtomValue( assetBalanceAtomFamily({ chain: registry?.chain, walletAddress: sourceAddress, }) ); - const { trackEvent } = useFathomTracker(); - const [shielded, setShielded] = useState(true); - const [selectedAssetBase, setSelectedAssetBase] = useUrlState(params.asset); - const [amount, setAmount] = useState(); - const [generalErrorMessage, setGeneralErrorMessage] = useState(""); - const [sourceChannel, setSourceChannel] = useState(""); - const [destinationChannel, setDestinationChannel] = useState(""); - const [currentProgress, setCurrentProgress] = useState(); - const [txHash, setTxHash] = useState(); - - const availableDisplayAmount = mapUndefined((baseDenom) => { - return userAssets ? userAssets[baseDenom]?.amount : undefined; - }, selectedAssetBase); - - const selectedAsset = - selectedAssetBase ? userAssets?.[selectedAssetBase]?.asset : undefined; - - const availableAssets = useMemo(() => { - if (!userAssets || !registry) return undefined; - - const output: Record = {}; - - Object.entries(userAssets).forEach(([key, { asset }]) => { - if ( - SUPPORTED_ASSETS_MAP.get(registry.chain.chain_name)?.includes( - asset.symbol - ) - ) { - output[key] = { ...userAssets[key] }; - } - }); - - return output; - }, [Object.keys(userAssets || {}).join(""), registry?.chain.chain_name]); - - // Manage the history of transactions const { storeTransaction } = useTransactionActions(); - // Utils for IBC transfers const { transferToNamada, gasConfig } = useIbcTransaction({ registry, sourceAddress, sourceChannel, destinationChannel, - shielded, - selectedAsset, + shielded: isShieldedAddress(destinationAddress ?? ""), + selectedAsset: selectedAssetWithAmount?.asset, }); + // DERIVED VALUES + const shielded = isShieldedAddress(destinationAddress ?? ""); + const availableDisplayAmount = mapUndefined((baseDenom) => { + return userAssets ? userAssets[baseDenom]?.amount : undefined; + }, selectedAssetWithAmount?.asset?.address); const namadaAddress = useMemo(() => { return ( defaultAccounts.data?.find( @@ -121,15 +91,12 @@ export const IbcTransfer = (): JSX.Element => { )?.address || "" ); }, [defaultAccounts, shielded]); - const requiresIbcChannels = Boolean( !isLoadingIbcChannels && (unknownIbcChannels || (shielded && ibcChannels && !ibcChannels?.namadaChannel)) ); - useEffect(() => setSelectedAssetBase(undefined), [registry]); - // Set source and destination channels based on IBC channels data useEffect(() => { setSourceChannel(ibcChannels?.ibcChannel || ""); @@ -159,12 +126,12 @@ export const IbcTransfer = (): JSX.Element => { try { invariant(registry?.chain, "Error: Chain not selected"); setGeneralErrorMessage(""); - setCurrentProgress("Submitting..."); + setCurrentStatus("Submitting..."); const result = await transferToNamada.mutateAsync({ - destinationAddress, - displayAmount, + destinationAddress: destinationAddress ?? "", + displayAmount: new BigNumber(displayAmount ?? "0"), memo, - onUpdateStatus: setCurrentProgress, + onUpdateStatus: setCurrentStatus, }); storeTransaction(result); setTxHash(result.hash); @@ -173,20 +140,8 @@ export const IbcTransfer = (): JSX.Element => { ); } catch (err) { setGeneralErrorMessage(err + ""); - setCurrentProgress(undefined); - } - }; - - const onChangeWallet = (): void => { - if (registry) { - connectToChainId(registry.chain.chain_id); - return; + setCurrentStatus(undefined); } - connectToChainId(defaultChainId); - }; - - const onChangeChain = (chain: Chain): void => { - connectToChainId(chain.chain_id); }; return ( @@ -194,34 +149,22 @@ export const IbcTransfer = (): JSX.Element => {
-
{!completedAt && }
{ transferToNamada.isSuccess } completedAt={completedAt} - ibcTransfer={"deposit"} - currentStatus={currentProgress} + currentStatus={currentStatus ?? ""} requiresIbcChannels={requiresIbcChannels} - ibcOptions={{ + ibcChannels={{ sourceChannel, - onChangeSourceChannel: setSourceChannel, destinationChannel, + onChangeSourceChannel: setSourceChannel, onChangeDestinationChannel: setDestinationChannel, }} errorMessage={generalErrorMessage || transferToNamada.error?.message} onSubmitTransfer={onSubmitTransfer} onComplete={() => { - txHash && + if (txHash) { + setAmount(undefined); navigate(generatePath(routes.transaction, { hash: txHash })); + } }} + keplrWalletManager={keplrWalletManager} + assetSelectorModalOpen={assetSelectorModalOpen} + setAssetSelectorModalOpen={setAssetSelectorModalOpen} />
); diff --git a/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx b/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx deleted file mode 100644 index b802168b04..0000000000 --- a/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Panel } from "@namada/components"; -import { NavigationFooter } from "App/AccountOverview/NavigationFooter"; -import { ConnectPanel } from "App/Common/ConnectPanel"; -import { PageWithSidebar } from "App/Common/PageWithSidebar"; -import { Sidebar } from "App/Layout/Sidebar"; -import { useUserHasAccount } from "hooks/useIsAuthenticated"; -import { Outlet } from "react-router-dom"; -import { LearnAboutIbc } from "./LearnAboutIbc"; - -export const IbcTransfersLayout = (): JSX.Element => { - const userHasAccount = useUserHasAccount(); - - if (!userHasAccount) { - return ; - } - - const renderOutletContent = (): JSX.Element => ( - - - - ); - - return ( - -
- {renderOutletContent()} - -
- - - - - ); -}; diff --git a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx index c32bbbbf0c..b5c623406f 100644 --- a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx +++ b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx @@ -1,12 +1,10 @@ -import { Chain } from "@chain-registry/types"; import { IbcTransferProps } from "@namada/sdk-multicore"; import { AccountType } from "@namada/types"; import { mapUndefined } from "@namada/utils"; -import { params, routes } from "App/routes"; -import { - OnSubmitTransferParams, - TransferModule, -} from "App/Transfer/TransferModule"; +import { routes } from "App/routes"; +import { isShieldedAddress } from "App/Transfer/common"; +import { TransferModule } from "App/Transfer/TransferModule"; +import { OnSubmitTransferParams } from "App/Transfer/types"; import { allDefaultAccountsAtom, defaultAccountAtom, @@ -17,110 +15,105 @@ import { namadaTransparentAssetsAtom, } from "atoms/balance"; import { chainAtom } from "atoms/chain"; -import { - getChainRegistryByChainName, - ibcChannelsFamily, - namadaChainRegistryAtom, -} from "atoms/integrations"; +import { ibcChannelsFamily } from "atoms/integrations"; import { ledgerStatusDataAtom } from "atoms/ledger"; -import { createIbcTxAtom } from "atoms/transfer/atoms"; +import { createIbcTxAtom, transferAmountAtom } from "atoms/transfer/atoms"; import { clearDisposableSigner, persistDisposableSigner, } from "atoms/transfer/services"; import BigNumber from "bignumber.js"; -import * as osmosis from "chain-registry/mainnet/osmosis"; import { useFathomTracker } from "hooks/useFathomTracker"; -import { useRequiresNewShieldedSync } from "hooks/useRequiresNewShieldedSync"; import { useTransaction } from "hooks/useTransaction"; import { useTransactionActions } from "hooks/useTransactionActions"; -import { useUrlState } from "hooks/useUrlState"; import { useWalletManager } from "hooks/useWalletManager"; -import { wallets } from "integrations"; import { KeplrWalletManager } from "integrations/Keplr"; import invariant from "invariant"; import { useAtom, useAtomValue } from "jotai"; import { TransactionPair } from "lib/query"; import { useEffect, useState } from "react"; import { generatePath, useNavigate } from "react-router-dom"; -import { Asset, IbcTransferTransactionData, TransferStep } from "types"; import { - isNamadaAsset, + Asset, + AssetWithAmountAndChain, + IbcTransferTransactionData, + TransferStep, +} from "types"; +import { toBaseAmount, toDisplayAmount, useTransactionEventListener, } from "utils"; -import { IbcTabNavigation } from "./IbcTabNavigation"; import { IbcTopHeader } from "./IbcTopHeader"; -const defaultChainId = "cosmoshub-4"; -const keplr = new KeplrWalletManager(); - -export const IbcWithdraw = (): JSX.Element => { - const defaultAccounts = useAtomValue(allDefaultAccountsAtom); - const shieldedAccount = defaultAccounts.data?.find( - (account) => account.type === AccountType.ShieldedKeys - ); - const transparentAccount = useAtomValue(defaultAccountAtom); - const namadaChain = useAtomValue(chainAtom); - const [ledgerStatus, setLedgerStatusStop] = useAtom(ledgerStatusDataAtom); - const namadaChainRegistry = useAtomValue(namadaChainRegistryAtom); - const chain = namadaChainRegistry.data?.chain; - - const requiresNewShieldedSync = useRequiresNewShieldedSync(); - const [generalErrorMessage, setGeneralErrorMessage] = useState(""); - const [selectedAssetAddress, setSelectedAssetAddress] = useUrlState( - params.asset - ); - const [shielded, setShielded] = useState(!requiresNewShieldedSync); +interface IbcWithdrawProps { + sourceAddress: string; + setSourceAddress: (address?: string) => void; + destinationAddress: string; + setDestinationAddress: (address?: string) => void; + keplrWalletManager: KeplrWalletManager; + assetSelectorModalOpen: boolean | undefined; + setAssetSelectorModalOpen: (open: boolean) => void; +} + +export const IbcWithdraw = ({ + sourceAddress, + setSourceAddress, + destinationAddress, + setDestinationAddress, + keplrWalletManager, + assetSelectorModalOpen, + setAssetSelectorModalOpen, +}: IbcWithdrawProps): JSX.Element => { + // COMPONENT STATE + const [selectedAssetWithAmount, setSelectedAssetWithAmount] = useState< + AssetWithAmountAndChain | undefined + >(); const [refundTarget, setRefundTarget] = useState(); - const [amount, setAmount] = useState(); + const [amount, setAmount] = useAtom(transferAmountAtom); const [customAddress, setCustomAddress] = useState(""); const [sourceChannel, setSourceChannel] = useState(""); - const [currentStatus, setCurrentStatus] = useState(""); - const [statusExplanation, setStatusExplanation] = useState(""); const [completedAt, setCompletedAt] = useState(); const [txHash, setTxHash] = useState(); - const [destinationChain, setDestinationChain] = useState(); + // ERROR & STATUS STATE + const [currentStatus, setCurrentStatus] = useState(""); + const [statusExplanation, setStatusExplanation] = useState(""); + const [generalErrorMessage, setGeneralErrorMessage] = useState(""); + // GLOBAL STATE + const defaultAccounts = useAtomValue(allDefaultAccountsAtom); + const { + walletAddress: keplrAddress, + chainId, + registry, + } = useWalletManager(keplrWalletManager); + const transparentAccount = useAtomValue(defaultAccountAtom); + const namadaChain = useAtomValue(chainAtom); + const [ledgerStatus, setLedgerStatusStop] = useAtom(ledgerStatusDataAtom); const { refetch: genDisposableSigner } = useAtomValue(disposableSignerAtom); - const alias = shieldedAccount?.alias ?? transparentAccount.data?.alias; - - const { data: availableAssets, isLoading: isLoadingAssets } = useAtomValue( - shielded ? namadaShieldedAssetsAtom : namadaTransparentAssetsAtom - ); - const { storeTransaction } = useTransactionActions(); const { trackEvent } = useFathomTracker(); const navigate = useNavigate(); - + // DERIVED VALUES + const shieldedAccount = defaultAccounts.data?.find( + (account) => account.type === AccountType.ShieldedKeys + ); + const alias = shieldedAccount?.alias ?? transparentAccount.data?.alias; + const shielded = isShieldedAddress(sourceAddress ?? ""); + const { data: availableAssets } = useAtomValue( + shielded ? namadaShieldedAssetsAtom : namadaTransparentAssetsAtom + ); const ledgerAccountInfo = ledgerStatus && { deviceConnected: ledgerStatus.connected, errorMessage: ledgerStatus.errorMessage, }; - const availableAmount = mapUndefined( (address) => availableAssets?.[address]?.amount, - selectedAssetAddress + selectedAssetWithAmount?.asset.address ); - const selectedAsset = - selectedAssetAddress ? availableAssets?.[selectedAssetAddress] : undefined; - - const { - walletAddress: keplrAddress, - connectToChainId, - chainId, - registry, - loadWalletAddress, - } = useWalletManager(keplr); - - const onChangeWallet = (): void => { - if (registry) { - connectToChainId(registry.chain.chain_id); - return; - } - connectToChainId(defaultChainId); - }; + selectedAssetWithAmount?.asset.address ? + availableAssets?.[selectedAssetWithAmount?.asset.address] + : undefined; useTransactionEventListener( ["IbcWithdraw.Success", "ShieldedIbcWithdraw.Success"], @@ -145,62 +138,21 @@ export const IbcWithdraw = (): JSX.Element => { const redirectToTimeline = (): void => { if (txHash) { + setAmount(undefined); navigate(generatePath(routes.transaction, { hash: txHash })); } }; - const updateDestinationChainAndAddress = async ( - chain: Chain | undefined - ): Promise => { - setDestinationChain(chain); - if (customAddress) { - setCustomAddress(""); - } - if (chain) { - await connectToChainId(chain.chain_id); - await loadWalletAddress(chain.chain_id); - } - }; - const { data: ibcChannels, isError: unknownIbcChannels, isLoading: isLoadingIbcChannels, - } = useAtomValue(ibcChannelsFamily(destinationChain?.chain_name)); + } = useAtomValue(ibcChannelsFamily(registry?.chain.chain_name)); useEffect(() => { setSourceChannel(ibcChannels?.namadaChannel || ""); }, [ibcChannels]); - // Search for original chain. We don't want to enable users to transfer Namada assets - // to other chains different than the original one. Ex: OSMO should only be withdrew to Osmosis, - // ATOM to Cosmoshub, etc. - useEffect(() => { - (async () => { - if (!selectedAsset) { - await updateDestinationChainAndAddress(undefined); - return; - } - - let chain: Chain | undefined; - - if (isNamadaAsset(selectedAsset.asset)) { - chain = osmosis.chain; // for now, NAM uses the osmosis chain - } else if (selectedAsset.asset.traces) { - const trace = selectedAsset.asset.traces.find( - (trace) => trace.type === "ibc" - ); - - if (trace) { - const chainName = trace.counterparty.chain_name; - chain = getChainRegistryByChainName(chainName)?.chain; - } - } - - await updateDestinationChainAndAddress(chain); - })(); - }, [selectedAsset]); - const { execute: performWithdraw, feeProps, @@ -325,8 +277,12 @@ export const IbcWithdraw = (): JSX.Element => { invariant(keplrAddress, "No address is selected"); invariant(shieldedAccount, "No shielded account is found"); invariant(transparentAccount.data, "No transparent account is found"); + invariant(destinationAddress, "No destination address is set"); - const amountInBaseDenom = toBaseAmount(selectedAsset.asset, displayAmount); + const amountInBaseDenom = toBaseAmount( + selectedAsset.asset, + BigNumber(displayAmount ?? 0) + ); const source = shielded ? shieldedAccount.pseudoExtendedKey! @@ -370,45 +326,26 @@ export const IbcWithdraw = (): JSX.Element => {
-
{!completedAt && }
{ - if (requiresNewShieldedSync) { - setShielded(false); - } else { - setShielded(isShielded); - } - }, + selectedAssetWithAmount, amount, - onChangeAmount: setAmount, ledgerAccountInfo, + onChangeAddress: setSourceAddress, + onChangeSelectedAsset: setSelectedAssetWithAmount, + onChangeAmount: setAmount, }} destination={{ - wallet: wallets.keplr, - walletAddress: keplrAddress, - availableWallets: [wallets.keplr], - enableCustomAddress: true, customAddress, - onChangeCustomAddress: setCustomAddress, - chain: destinationChain, - onChangeWallet, + address: destinationAddress, + onChangeAddress: + customAddress ? + (address) => setCustomAddress(address ?? "") + : setDestinationAddress, isShieldedAddress: false, }} - isShieldedTx={shielded} errorMessage={generalErrorMessage || error?.message || ""} currentStatus={currentStatus} currentStatusExplanation={statusExplanation} @@ -418,9 +355,8 @@ export const IbcWithdraw = (): JSX.Element => { * from the confirmation event from target chain */ isSuccess } - ibcTransfer={"withdraw"} requiresIbcChannels={requiresIbcChannels} - ibcOptions={{ + ibcChannels={{ sourceChannel, onChangeSourceChannel: setSourceChannel, }} @@ -428,7 +364,9 @@ export const IbcWithdraw = (): JSX.Element => { feeProps={feeProps} onComplete={redirectToTimeline} completedAt={completedAt} - isSyncingMasp={requiresNewShieldedSync} + keplrWalletManager={keplrWalletManager} + assetSelectorModalOpen={assetSelectorModalOpen} + setAssetSelectorModalOpen={setAssetSelectorModalOpen} />
); diff --git a/apps/namadillo/src/App/Ibc/ShieldAllIntro.tsx b/apps/namadillo/src/App/Ibc/ShieldAllIntro.tsx index 5f08e6bc85..8d79b46153 100644 --- a/apps/namadillo/src/App/Ibc/ShieldAllIntro.tsx +++ b/apps/namadillo/src/App/Ibc/ShieldAllIntro.tsx @@ -44,7 +44,7 @@ export const ShieldAllIntro = ({ {displayChainModal && ( setDisplayChainModal(false)} /> diff --git a/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx b/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx index 090c4c43a1..dcbaffb429 100644 --- a/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx +++ b/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx @@ -7,12 +7,7 @@ import { import svgImg from "App/Assets/ShieldedParty.svg"; import { SelectedWallet } from "App/Transfer/SelectedWallet"; import { useEffect, useMemo, useState } from "react"; -import { - Asset, - AssetWithAmount, - ChainRegistryEntry, - WalletProvider, -} from "types"; +import { Asset, AssetWithAmount, ChainRegistryEntry } from "types"; import { SelectableAddressWithAssetAndAmount, ShieldAllAssetList, @@ -22,7 +17,6 @@ import ibcTransferImageBlack from "./assets/ibc-transfer-black.png"; type ShieldAllPanelProps = { registry: ChainRegistryEntry; - wallet: WalletProvider; walletAddress: string; isLoading: boolean; assetList: AssetWithAmount[]; @@ -30,7 +24,6 @@ type ShieldAllPanelProps = { }; export const ShieldAllPanel = ({ - wallet, walletAddress, isLoading, assetList, @@ -95,7 +88,6 @@ export const ShieldAllPanel = ({

Review and confirm assets to shield

{ return ( + + + + + ); diff --git a/apps/namadillo/src/App/Icons/ShieldIcon.tsx b/apps/namadillo/src/App/Icons/ShieldIcon.tsx index 219e0579fb..ff4d61078c 100644 --- a/apps/namadillo/src/App/Icons/ShieldIcon.tsx +++ b/apps/namadillo/src/App/Icons/ShieldIcon.tsx @@ -11,13 +11,13 @@ export const ShieldIcon = (): JSX.Element => { cx="8.82703" cy="9.20715" r="7.45715" - stroke="white" + stroke="currentColor" strokeWidth="2" /> - - - - + + + + ); }; diff --git a/apps/namadillo/src/App/Icons/TransferIcon.tsx b/apps/namadillo/src/App/Icons/TransferIcon.tsx new file mode 100644 index 0000000000..36021f998d --- /dev/null +++ b/apps/namadillo/src/App/Icons/TransferIcon.tsx @@ -0,0 +1,27 @@ +export const TransferIcon = (): JSX.Element => { + return ( + + + + + + + + + ); +}; diff --git a/apps/namadillo/src/App/Layout/Navigation.tsx b/apps/namadillo/src/App/Layout/Navigation.tsx index 21e6230e82..c2965de050 100644 --- a/apps/namadillo/src/App/Layout/Navigation.tsx +++ b/apps/namadillo/src/App/Layout/Navigation.tsx @@ -1,4 +1,7 @@ import { SidebarMenuItem } from "App/Common/SidebarMenuItem"; +import { ReceiveIcon } from "App/Icons/ReceiveIcon"; +import { ShieldIcon } from "App/Icons/ShieldIcon"; +import { TransferIcon } from "App/Icons/TransferIcon"; import { routes } from "App/routes"; import { applicationFeaturesAtom } from "atoms/settings"; import { useAtomValue } from "jotai"; @@ -6,9 +9,8 @@ import { AiFillHome } from "react-icons/ai"; import { BsDiscord, BsTwitterX } from "react-icons/bs"; import { FaVoteYea } from "react-icons/fa"; import { FaBug } from "react-icons/fa6"; -import { GoHistory, GoStack } from "react-icons/go"; -import { IoSwapHorizontal } from "react-icons/io5"; -import { TbVectorTriangle } from "react-icons/tb"; +import { GoStack } from "react-icons/go"; +import { MdOutlineKeyboardBackspace } from "react-icons/md"; import { Link } from "react-router-dom"; import { DISCORD_URL, TWITTER_URL } from "urls"; @@ -32,21 +34,26 @@ export const Navigation = (): JSX.Element => { url: routes.governance, }, { - label: "IBC Transfer", - icon: , - url: features.ibcTransfersEnabled ? routes.ibc : undefined, + label: "Shield", + icon: , + url: routes.maspShield, }, { label: "Transfer", - icon: , + icon: , url: features.maspEnabled || features.namTransfersEnabled ? routes.transfer : undefined, }, + { + label: "Receive", + icon: , + url: routes.receive, + }, { label: "History", - icon: , + icon: , url: features.namTransfersEnabled || features.ibcTransfersEnabled ? routes.history @@ -57,14 +64,27 @@ export const Navigation = (): JSX.Element => { return (
    - {menuItems.map((item) => ( -
  • - - {item.icon} - {item.label} - -
    • - ))} + {menuItems.map((item) => { + const shieldingRoute = item.label === "Shield"; + const historyRoute = item.label === "History"; + return ( +
  • + {shieldingRoute && ( + <> +
    +
    Move Assets
    + + )} + + {item.icon} + {item.label} + + {historyRoute && ( +
    + )} +
    • + ); + })}
    diff --git a/apps/namadillo/src/App/Layout/TopNavigation.tsx b/apps/namadillo/src/App/Layout/TopNavigation.tsx index 2dbd8e7491..a6bf33cb60 100644 --- a/apps/namadillo/src/App/Layout/TopNavigation.tsx +++ b/apps/namadillo/src/App/Layout/TopNavigation.tsx @@ -1,14 +1,10 @@ -import { ActionButton } from "@namada/components"; import { AccountType } from "@namada/types"; import { ConnectExtensionButton } from "App/Common/ConnectExtensionButton"; import { TransactionInProgressSpinner } from "App/Common/TransactionInProgressSpinner"; import { UnshieldAssetsModal } from "App/Common/UnshieldAssetsModal"; import { routes } from "App/routes"; import { defaultAccountAtom } from "atoms/accounts"; -import { - applicationFeaturesAtom, - signArbitraryEnabledAtom, -} from "atoms/settings"; +import { signArbitraryEnabledAtom } from "atoms/settings"; import { useUserHasAccount } from "hooks/useIsAuthenticated"; import { useAtomValue } from "jotai"; import { useState } from "react"; @@ -24,9 +20,6 @@ export const TopNavigation = (): JSX.Element => { const userHasAccount = useUserHasAccount(); const signArbitraryEnabled = useAtomValue(signArbitraryEnabledAtom); - const { maspEnabled, namTransfersEnabled } = useAtomValue( - applicationFeaturesAtom - ); const defaultAccount = useAtomValue(defaultAccountAtom); const location = useLocation(); const navigate = useNavigate(); @@ -53,44 +46,7 @@ export const TopNavigation = (): JSX.Element => { return (
    -
    - {maspEnabled && ( - - navigate(routes.shieldAssets, { - state: { backgroundLocation: location }, - }) - } - > - Shield Assets - - )} - {maspEnabled && ( - setUnshieldingModalOpen(true)} - > - Unshield - - )} - {(maspEnabled || namTransfersEnabled) && ( - - Transfer - - )} -
    -
    - {defaultAccount.data?.type !== AccountType.Ledger && signArbitraryEnabled && ( + ); + })} + + {/* Connect Wallet button if Keplr is not connected */} + {!connectedWallets.keplr && ( + + )} +
    +
    + ); +}; diff --git a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx index 976f3e6501..1503f9b0f9 100644 --- a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx +++ b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx @@ -1,13 +1,17 @@ -import { ActionButton } from "@namada/components"; +import { Asset } from "@chain-registry/types"; +import { FiatCurrency } from "App/Common/FiatCurrency"; import { TokenCurrency } from "App/Common/TokenCurrency"; +import { tokenPricesFamily } from "atoms/prices/atoms"; import BigNumber from "bignumber.js"; import clsx from "clsx"; -import { Asset } from "types"; +import { useAtomValue } from "jotai"; +import { Address } from "types"; type AvailableAmountFooterProps = { availableAmount?: BigNumber; availableAmountMinusFees?: BigNumber; asset?: Asset; + originalAddress?: Address; onClickMax?: () => void; }; @@ -17,54 +21,57 @@ export const AvailableAmountFooter = ({ asset, onClickMax, }: AvailableAmountFooterProps): JSX.Element => { + const tokenPrices = useAtomValue( + tokenPricesFamily(asset?.address ? [asset.address] : []) + ); + if (availableAmountMinusFees === undefined || !asset) { return <>; } const isInsufficientBalance = availableAmountMinusFees.eq(0); + // Calculate dollar value for available amount + const availableDollarAmount = + asset?.address && tokenPrices.data?.[asset.address] ? + availableAmountMinusFees.multipliedBy(tokenPrices.data[asset.address]) + : undefined; return (
    -
    -
    +
    +
    Available:{" "} + {isInsufficientBalance && ( +
    +
    Insufficient balance to cover the fee
    + {availableAmount && ( +
    +
    + Balance:{" "} + +
    +
    + )} +
    + )}
    - {isInsufficientBalance && ( -
    -
    Insufficient balance to cover the fee
    - {availableAmount && ( -
    - Balance:{" "} - -
    - )} -
    + + {availableDollarAmount && ( + )}
    - - {onClickMax && ( - - Max - - )} -
    ); }; diff --git a/apps/namadillo/src/App/Transfer/ChainBadge.tsx b/apps/namadillo/src/App/Transfer/ChainBadge.tsx new file mode 100644 index 0000000000..c7ca567cb4 --- /dev/null +++ b/apps/namadillo/src/App/Transfer/ChainBadge.tsx @@ -0,0 +1,38 @@ +import { Chain } from "@chain-registry/types"; +import { twMerge } from "tailwind-merge"; + +export const ChainBadge = ({ + chain, + className, +}: { + chain?: Chain; + className?: string; +}): JSX.Element => { + if (!chain) { + return <>; + } + + const image = chain?.images?.find((i) => i.theme?.circle === false); + const imageUrl = image?.svg ?? image?.png; + + return ( +
    + {imageUrl ? + {chain.chain_name} + : + {chain.chain_name.charAt(0).toUpperCase()} + + } +
    + ); +}; diff --git a/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx b/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx index a3fb7e191a..0b1a2c31d9 100644 --- a/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx +++ b/apps/namadillo/src/App/Transfer/ConnectProviderButton.tsx @@ -2,20 +2,23 @@ import { ActionButton } from "@namada/components"; type ConnectProviderButtonProps = { onClick?: () => void; + disabled?: boolean; }; export const ConnectProviderButton = ({ onClick, + disabled, }: ConnectProviderButtonProps): JSX.Element => { return ( - Connect Wallet + Select Address ); }; diff --git a/apps/namadillo/src/App/Transfer/ConnectedWalletInfo.tsx b/apps/namadillo/src/App/Transfer/ConnectedWalletInfo.tsx index 7c1abd1415..424258e1e9 100644 --- a/apps/namadillo/src/App/Transfer/ConnectedWalletInfo.tsx +++ b/apps/namadillo/src/App/Transfer/ConnectedWalletInfo.tsx @@ -1,22 +1,15 @@ -import { WalletProvider } from "types"; import { SelectedWallet } from "./SelectedWallet"; type ConnectedWalletInfoProps = { - wallet: WalletProvider; walletAddress: string; }; export const ConnectedWalletInfo = ({ - wallet, walletAddress, }: ConnectedWalletInfoProps): JSX.Element => { return (
    - + Connected
    ); diff --git a/apps/namadillo/src/App/Transfer/CurrentStatus.tsx b/apps/namadillo/src/App/Transfer/CurrentStatus.tsx index aebd34d25c..a63f22e6aa 100644 --- a/apps/namadillo/src/App/Transfer/CurrentStatus.tsx +++ b/apps/namadillo/src/App/Transfer/CurrentStatus.tsx @@ -17,11 +17,9 @@ export const CurrentStatus = ({ > {status}
    - {explanation && ( -
    - {explanation} -
    - )} +
    + {explanation} +
    ); }; diff --git a/apps/namadillo/src/App/Transfer/CustomAddressForm.tsx b/apps/namadillo/src/App/Transfer/CustomAddressForm.tsx index e8533a1cf7..fa976c7bf0 100644 --- a/apps/namadillo/src/App/Transfer/CustomAddressForm.tsx +++ b/apps/namadillo/src/App/Transfer/CustomAddressForm.tsx @@ -1,50 +1,22 @@ import { Input, Stack } from "@namada/components"; -import { chain as osmosis } from "chain-registry/mainnet/osmosis"; -import { useMemo } from "react"; -import namadaShieldedSvg from "./assets/namada-shielded.svg"; -import namadaTransparentSvg from "./assets/namada-transparent.svg"; - type CustomAddressFormProps = { - onChangeAddress?: (address: string) => void; - customAddress?: string; - memo?: string; - onChangeMemo?: (address: string) => void; + memo: string | undefined; + onChangeMemo: ((memo: string) => void) | undefined; }; export const CustomAddressForm = ({ - customAddress, - onChangeAddress, memo, onChangeMemo, }: CustomAddressFormProps): JSX.Element => { - const iconUrl = useMemo((): string | undefined => { - if (customAddress?.startsWith("osmo")) return osmosis.logo_URIs?.svg; - if (customAddress?.startsWith("znam")) return namadaShieldedSvg; - if (customAddress?.startsWith("tnam")) return namadaTransparentSvg; - return ""; - }, [customAddress]); - return ( - {onChangeAddress && ( - onChangeAddress(e.target.value)} - > - {iconUrl && ( - - - - )} - - )} {onChangeMemo && ( onChangeMemo(e.target.value)} + className="mt-4" placeholder="Insert memo here" /> )} diff --git a/apps/namadillo/src/App/Transfer/DestinationAddressModal.tsx b/apps/namadillo/src/App/Transfer/DestinationAddressModal.tsx new file mode 100644 index 0000000000..df058d6963 --- /dev/null +++ b/apps/namadillo/src/App/Transfer/DestinationAddressModal.tsx @@ -0,0 +1,377 @@ +import { Input, Stack } from "@namada/components"; +import { AccountType } from "@namada/types"; +import { shortenAddress } from "@namada/utils"; +import { SelectModal } from "App/Common/SelectModal"; +import { allDefaultAccountsAtom } from "atoms/accounts"; +import { getChainRegistryByChainId } from "atoms/integrations"; +import { RecentAddress, recentAddressesAtom } from "atoms/transactions"; +import { getAddressLabel } from "atoms/transfer/functions"; +import clsx from "clsx"; +import { useKeplrAddressForAsset } from "hooks/useKeplrAddressForAsset"; +import { wallets } from "integrations"; +import { getChainFromAddress, getChainImageUrl } from "integrations/utils"; +import { useAtom, useAtomValue } from "jotai"; +import { useCallback, useState } from "react"; +import { Address, Asset } from "types"; +import namadaShieldedIcon from "./assets/namada-shielded.svg"; +import namadaTransparentIcon from "./assets/namada-transparent.svg"; +import { isShieldedAddress, isTransparentAddress } from "./common"; + +export type ValidationError = { + type: "invalid-format" | "unsupported-chain" | "empty"; + message: string; +}; + +export type ValidationResult = { + isValid: boolean; + error?: ValidationError; + addressType?: "transparent" | "shielded" | "ibc"; +}; + +type AddressOption = { + id: string; + label: string; + address: string; + icon: string; + type: "transparent" | "shielded" | "ibc" | "keplr"; +}; + +type DestinationAddressModalProps = { + onClose: () => void; + onSelectAddress: (address: Address) => void; + sourceAddress: string; + sourceAsset?: Asset; +}; + +export const DestinationAddressModal = ({ + sourceAsset, + sourceAddress, + onClose, + onSelectAddress, +}: DestinationAddressModalProps): JSX.Element => { + const [customAddress, setCustomAddress] = useState(""); + const [validationResult, setValidationResult] = + useState(null); + const { data: accounts } = useAtomValue(allDefaultAccountsAtom); + const [recentAddresses, setRecentAddresses] = useAtom(recentAddressesAtom); + const keplrAddress = useKeplrAddressForAsset(sourceAsset); + + const transparentAccount = accounts?.find( + (account) => account.type !== AccountType.ShieldedKeys + ); + const shieldedAccount = accounts?.find( + (account) => account.type === AccountType.ShieldedKeys + ); + + // Dont display an address if it matches the source address + const isSourceAddressMatch = (address: string): boolean => + address === sourceAddress; + + // Build your addresses options + const addressOptions: AddressOption[] = []; + if (accounts) { + const transparentAccount = accounts.find( + (account) => account.type !== AccountType.ShieldedKeys + ); + + if ( + transparentAccount && + !isSourceAddressMatch(transparentAccount.address) + ) { + addressOptions.push({ + id: "transparent", + label: "Transparent Address", + address: transparentAccount.address, + icon: namadaTransparentIcon, + type: "transparent", + }); + } + if (shieldedAccount && !isSourceAddressMatch(shieldedAccount.address)) { + addressOptions.push({ + id: "shielded", + label: "Shielded Address", + address: shieldedAccount.address, + icon: namadaShieldedIcon, + type: "shielded", + }); + } + } + if (keplrAddress) + addressOptions.push({ + id: "keplr", + label: "Keplr Address", + address: keplrAddress ?? "", + icon: + !keplrAddress ? + wallets.keplr.iconUrl + : getChainImageUrl(getChainFromAddress(keplrAddress ?? "")), + type: "keplr", + }); + + // Build recent addresses options + const recentAddressOptions: AddressOption[] = recentAddresses.map( + (recent) => ({ + id: `recent-${recent.address}`, + label: recent.label || getAddressLabel(recent.address, recent.type), + address: recent.address, + icon: + recent.type === "shielded" ? namadaShieldedIcon + : recent.type === "transparent" ? namadaTransparentIcon + : getChainImageUrl(getChainFromAddress(recent.address ?? "")), // fallback for IBC + type: recent.type, + }) + ); + + const validateAddress = (address: string): ValidationResult => { + // Check if address is empty + if (!address.trim()) { + return { + isValid: false, + error: { + type: "empty", + message: "Address cannot be empty", + }, + }; + } + + const trimmedAddress = address.trim(); + + // Check for Namada transparent address + if (isTransparentAddress(trimmedAddress)) { + return { + isValid: true, + addressType: "transparent", + }; + } + + // Check for Namada shielded address + if (isShieldedAddress(trimmedAddress)) { + return { + isValid: true, + addressType: "shielded", + }; + } + + // Check for IBC address + const chain = getChainFromAddress(trimmedAddress); + if (chain) { + // Check if the chain is supported by using the registry function + const registry = getChainRegistryByChainId(chain.chain_id); + + if (registry) { + return { + isValid: true, + addressType: "ibc", + }; + } else { + return { + isValid: false, + error: { + type: "unsupported-chain", + message: `Chain ${chain.pretty_name || chain.chain_name} is not supported`, + }, + }; + } + } + + // If we reach here, the address format is invalid + return { + isValid: false, + error: { + type: "invalid-format", + message: + "Invalid address format. Please enter a valid Namada or IBC address", + }, + }; + }; + + const addToRecentAddresses = ( + recentAddresses: RecentAddress[], + address: Address, + type: "transparent" | "shielded" | "ibc", + label?: string + ): RecentAddress[] => { + // Remove existing entry if it exists + const filtered = recentAddresses.filter( + (recent) => recent.address !== address + ); + + // Add new entry at the beginning + const newEntry: RecentAddress = { + address, + type, + label, + timestamp: Date.now(), + }; + + // Keep only the last 10 recent addresses + return [newEntry, ...filtered].slice(0, 10); + }; + + const handleAddressClick = (address: string): void => { + onSelectAddress(address); + onClose(); + }; + + const handleCustomAddressChange = ( + e: React.ChangeEvent + ): void => { + const value = e.target.value; + setCustomAddress(value); + + // Validate the address as user types + if (value.trim()) { + const result = validateAddress(value); + setValidationResult(result); + } else { + setValidationResult(null); + } + }; + + const handleCustomAddressSubmit = (): void => { + const trimmedAddress = customAddress.trim(); + if (!trimmedAddress) return; + + const result = validateAddress(trimmedAddress); + setValidationResult(result); + + if (result.isValid && result.addressType) { + // Add to recent addresses + const label = getAddressLabel(trimmedAddress, result.addressType); + const updatedRecents = addToRecentAddresses( + recentAddresses, + trimmedAddress, + result.addressType, + label + ); + setRecentAddresses(updatedRecents); + + // Select the address + onSelectAddress(trimmedAddress); + onClose(); + } + }; + + const handleKeyPress = (e: React.KeyboardEvent): void => { + if (e.key === "Enter") { + handleCustomAddressSubmit(); + } + }; + + // Determine input styling based on validation + const getInputClassName = useCallback((): string => { + if (validationResult?.isValid) { + return "text-sm border-green-500 focus:border-green-500"; + } + if (validationResult?.error) { + return "text-sm border-red-500 focus:border-red-500"; + } + + return "text-sm border-neutral-500"; + }, [customAddress]); + + return ( + +
    +
    + + {validationResult?.error && ( +
    + {validationResult.error.message} +
    + )} +
    + +
    +
    + {addressOptions.length > 0 && ( +
    +

    + Your addresses +

    + + {addressOptions.map((option) => ( + + ))} + +
    + )} + + {recentAddressOptions.length > 0 && ( +
    +

    + Recent addresses +

    + + {recentAddressOptions.map((option) => ( + + ))} + +
    + )} +
    +
    +
    +     + ); +}; diff --git a/apps/namadillo/src/App/Transfer/ReceiveCard.tsx b/apps/namadillo/src/App/Transfer/ReceiveCard.tsx index 31ca653f80..c180323814 100644 --- a/apps/namadillo/src/App/Transfer/ReceiveCard.tsx +++ b/apps/namadillo/src/App/Transfer/ReceiveCard.tsx @@ -1,4 +1,4 @@ -import { Panel, SkeletonLoading } from "@namada/components"; +import { Panel, SkeletonLoading, Tooltip } from "@namada/components"; import { copyToClipboard } from "@namada/utils"; import { TabSelector } from "App/Common/TabSelector"; import { allDefaultAccountsAtom } from "atoms/accounts"; @@ -85,12 +85,15 @@ export const ReceiveCard = (): JSX.Element => {
-
+

{address || "No address available"}

+ + {address || "No address available"} + - - ); - })} - {filteredAssets.length === 0 && ( -

There are no available assets

- )} - - - ); -}; diff --git a/apps/namadillo/src/App/Transfer/SelectChainModal.tsx b/apps/namadillo/src/App/Transfer/SelectChainModal.tsx index 1e16a17cff..cfe74970a2 100644 --- a/apps/namadillo/src/App/Transfer/SelectChainModal.tsx +++ b/apps/namadillo/src/App/Transfer/SelectChainModal.tsx @@ -20,7 +20,6 @@ type SelectChainModalProps = { export const SelectChainModal = ({ onClose, onSelect, - wallet, walletAddress, chains, }: SelectChainModalProps): JSX.Element => { @@ -36,9 +35,7 @@ export const SelectChainModal = ({ return ( - {walletAddress && ( - - )} + {walletAddress && }
diff --git a/apps/namadillo/src/App/Transfer/SelectToken.tsx b/apps/namadillo/src/App/Transfer/SelectToken.tsx new file mode 100644 index 0000000000..e6bc91dbad --- /dev/null +++ b/apps/namadillo/src/App/Transfer/SelectToken.tsx @@ -0,0 +1,353 @@ +import { Chain } from "@chain-registry/types"; +import { Modal, Stack } from "@namada/components"; +import { ModalTransition } from "App/Common/ModalTransition"; +import { Search } from "App/Common/Search"; +import { + allChainsAtom, + connectedWalletsAtom, + getChainRegistryByChainName, + namadaRegistryChainAssetsMapAtom, +} from "atoms/integrations"; +import { tokenPricesFamily } from "atoms/prices/atoms"; +import clsx from "clsx"; +import { useWalletManager } from "hooks/useWalletManager"; +import { KeplrWalletManager } from "integrations/Keplr"; +import invariant from "invariant"; +import { useAtom, useAtomValue } from "jotai"; +import { useCallback, useMemo, useState } from "react"; +import { IoClose } from "react-icons/io5"; +import { AssetWithAmountAndChain } from "types"; +import { AddressDropdown } from "./AddressDropdown"; +import { ChainBadge } from "./ChainBadge"; +import { isNamadaAddress } from "./common"; + +type SelectTokenProps = { + setSourceAddress: (address?: string) => void; + sourceAddress: string; + destinationAddress: string; + isOpen: boolean; + onClose: () => void; + onSelect: + | (( + selectedAsset: AssetWithAmountAndChain, + newSourceAddress?: string + ) => void) + | undefined; + keplrWalletManager?: KeplrWalletManager; + assetsWithAmounts: AssetWithAmountAndChain[]; +}; + +export const SelectToken = ({ + sourceAddress, + destinationAddress, + setSourceAddress, + isOpen, + onClose, + onSelect, + assetsWithAmounts, + keplrWalletManager, +}: SelectTokenProps): JSX.Element | null => { + const [filter, setFilter] = useState(""); + const [selectedNetwork, setSelectedNetwork] = useState(null); + const [isConnectingKeplr, setIsConnectingKeplr] = useState(false); + const [_, setConnectedWallets] = useAtom(connectedWalletsAtom); + const chainAssets = useAtomValue(namadaRegistryChainAssetsMapAtom); + const chainAssetsMap = Object.values(chainAssets.data ?? {}); + const allChains = useAtomValue(allChainsAtom); + + // Create KeplrWalletManager instance and use with useWalletManager hook + const keplrWallet = keplrWalletManager ?? new KeplrWalletManager(); + const { connectToChainId } = useWalletManager(keplrWallet); + + // Get balances for connected chains + const allNetworks: Chain[] = useMemo(() => { + return (allChains.data ?? []) + .filter( + (chain) => + chain.network_type !== "testnet" && chain.chain_name !== "namada" + ) + .sort((a, b) => a.chain_name.localeCompare(b.chain_name)); + }, [allChains.data]); + + // Create a mapping of assets to their network names for better filtering + const assetToNetworkMap = useMemo(() => { + const map: Record = {}; + chainAssetsMap.forEach((asset) => { + if (asset && asset.name) { + // Map asset address to network name + map[asset.address || asset.base] = asset.display; + } + }); + return map; + }, [chainAssetsMap]); + + // Get token prices for USD calculation + const tokenAddresses = assetsWithAmounts + .map((assetWithAmount) => assetWithAmount.asset.address ?? "") + .filter((address) => !!address); + + const tokenPrices = useAtomValue(tokenPricesFamily(tokenAddresses)); + + const filteredTokens = useMemo(() => { + return assetsWithAmounts + .filter((assetWithAmount) => { + if (assetWithAmount.amount.eq(0)) return false; + + // Filter by search term + const matchesSearch = + !!filter && + assetWithAmount.asset.name + .toLowerCase() + .includes(filter.toLowerCase()); + + const matchesNetwork = + selectedNetwork === + assetWithAmount.asset.traces?.[0]?.counterparty?.chain_name; + return !selectedNetwork ? true : matchesSearch || matchesNetwork; + }) + .sort((a, b) => Number(b.amount) - Number(a.amount)); + }, [assetsWithAmounts, filter, selectedNetwork, assetToNetworkMap]); + + const handleNetworkSelect = (networkName: string): void => { + setSelectedNetwork(selectedNetwork === networkName ? null : networkName); + }; + + const handleWalletAddressChange = (address: string): void => { + setSourceAddress(address); // Only update local state + setSelectedNetwork(null); // Reset network filter when address changes + }; + + const handleClose = (): void => { + onClose(); + }; + + const handleTokenSelect = useCallback( + async (token: AssetWithAmountAndChain): Promise => { + // Check if current address is Keplr and if we need to connect to specific chain for this token + const isIbcOrKeplrToken = !isNamadaAddress(sourceAddress); + // only used for IBC tokens + let newSourceAddress: string | undefined; + try { + if (isIbcOrKeplrToken) { + setIsConnectingKeplr(true); + + try { + const keplrInstance = await keplrWallet.get(); + // Keplr is not installed, redirect to download page + if (!keplrInstance) { + keplrWallet.install(); + return; + } + + const targetChainRegistry = getChainRegistryByChainName( + token.chainName + ); + invariant(targetChainRegistry, "Target chain registry not found"); + const chainId = targetChainRegistry.chain.chain_id; + await connectToChainId(chainId); + + // Update connected wallets state only after successful connection + setConnectedWallets((obj: Record) => ({ + ...obj, + [keplrWallet.key]: true, + })); + const key = await keplrInstance.getKey(chainId); + newSourceAddress = key.bech32Address; + } catch (error) { + console.error( + "Failed to connect to Keplr for token:", + token.asset.symbol, + error + ); + // Continue with token selection even if Keplr connection fails + } finally { + setIsConnectingKeplr(false); + } + } + + onSelect?.(token, newSourceAddress); + onClose(); + } catch (error) { + console.error("Error in token selection:", error); + setIsConnectingKeplr(false); + onSelect?.(token, newSourceAddress); + onClose(); + } + }, + [sourceAddress] + ); + + const getOverlayChainLogo = ( + token: AssetWithAmountAndChain + ): JSX.Element | null => { + const chain = getChainRegistryByChainName(token.chainName)?.chain; + const isNamada = token.chainName === "namada"; + + if (isNamada) return null; + return ( + + ); + }; + + if (!isOpen) return null; + + return ( + <> + + +
+ {/* Left panel */} +
+ +

From A to Z

+ +
  • + +
    • + {allNetworks.map((network) => ( +
  • + +
    • + ))} +     +
    + + {/* Right panel - Token Selection */} +
    +
    +

    Select Token

    + +
    + +
    + +
    + +
    +
    + + + Your Tokens + + {filteredTokens.length > 0 ? + filteredTokens.map((token) => { + const tokenPrice = + token.asset.address ? + tokenPrices.data?.[token.asset.address] + : undefined; + return ( +
  • + +
    • + ); + }) + :

    No tokens found

    } +     +
    +
    + + {isConnectingKeplr && ( +
    + Connecting to Keplr... +
    + )} +
    +
    +     +     + + ); +}; diff --git a/apps/namadillo/src/App/Transfer/SelectedAsset.tsx b/apps/namadillo/src/App/Transfer/SelectedAsset.tsx index 714eb1d25a..fc9dee1dc7 100644 --- a/apps/namadillo/src/App/Transfer/SelectedAsset.tsx +++ b/apps/namadillo/src/App/Transfer/SelectedAsset.tsx @@ -21,12 +21,12 @@ export const SelectedAsset = ({ const selectorClassList = clsx( `flex items-center gap-4 text-xl text-white font-light cursor-pointer uppercase` ); - return ( + } +
    + + {customAddress && ( + + + )}
    - - )} + )} + + {isSubmitting && amount && destinationAsset && ( +
    + +
    + )} + + {isSubmitting && ( +
    +
    +
    +
    + {sourceWallet.name} + + {getAddressLabel(destinationAddress ?? "", addressType)} + +
    + {destinationAddress && ( + + )} +
    +
    + )} + + {!isSubmitting && ( + + )} +
    - {!isSubmitting && ( - + {isModalOpen && ( + )} - + ); }; diff --git a/apps/namadillo/src/App/Transfer/TransferLayout.tsx b/apps/namadillo/src/App/Transfer/TransferLayout.tsx index 63c574772b..559c2e80d6 100644 --- a/apps/namadillo/src/App/Transfer/TransferLayout.tsx +++ b/apps/namadillo/src/App/Transfer/TransferLayout.tsx @@ -1,29 +1,245 @@ +import { Panel } from "@namada/components"; import { NavigationFooter } from "App/AccountOverview/NavigationFooter"; import { ConnectPanel } from "App/Common/ConnectPanel"; import { PageWithSidebar } from "App/Common/PageWithSidebar"; +import { IbcTransfer } from "App/Ibc/IbcTransfer"; +import { IbcWithdraw } from "App/Ibc/IbcWithdraw"; +import { LearnAboutIbc } from "App/Ibc/LearnAboutIbc"; import { Sidebar } from "App/Layout/Sidebar"; +import { LearnAboutMasp } from "App/Masp/LearnAboutMasp"; +import { MaspShield } from "App/Masp/MaspShield"; +import { MaspUnshield } from "App/Masp/MaspUnshield"; import { LearnAboutTransfer } from "App/NamadaTransfer/LearnAboutTransfer"; +import { NamadaTransfer } from "App/NamadaTransfer/NamadaTransfer"; +import { MaspAssetRewards } from "App/Sidebars/MaspAssetRewards"; +import { allDefaultAccountsAtom, defaultAccountAtom } from "atoms/accounts"; +import { shieldedBalanceAtom } from "atoms/balance"; +import { connectedWalletsAtom } from "atoms/integrations"; import { useUserHasAccount } from "hooks/useIsAuthenticated"; -import { Outlet } from "react-router-dom"; +import { useUrlState, useUrlStateBatch } from "hooks/useUrlState"; +import { KeplrWalletManager } from "integrations/Keplr"; +import { getChainFromAddress } from "integrations/utils"; +import { useAtomValue } from "jotai"; +import { useEffect, useRef, useState } from "react"; +import { isNamadaAddress } from "./common"; +import { determineTransferType } from "./utils"; export const TransferLayout: React.FC = () => { + const keplrWalletManager = new KeplrWalletManager(); const userHasAccount = useUserHasAccount(); + const [sourceAddressUrl, setSourceAddressUrl] = useUrlState("source"); + const [destinationAddressUrl, setDestinationAddressUrl] = + useUrlState("destination"); + const [assetSelectorModalOpen, setAssetSelectorModalOpen] = useState(false); + const setUrlBatchParams = useUrlStateBatch(); + + const { refetch: refetchShieldedBalance } = useAtomValue(shieldedBalanceAtom); + const { data: defaultAccount } = useAtomValue(defaultAccountAtom); + const { data: accounts } = useAtomValue(allDefaultAccountsAtom); + const connectedWallets = useAtomValue(connectedWalletsAtom); + const sourceAddress = sourceAddressUrl ?? ""; + const destinationAddress = destinationAddressUrl ?? ""; + const previousAccountAddressRef = useRef( + defaultAccount?.address + ); + + const transferType = determineTransferType({ + sourceAddress, + destinationAddress, + }); + + // Reset addresses when account changes in extension + useEffect(() => { + if ( + previousAccountAddressRef.current && + previousAccountAddressRef.current !== defaultAccount?.address + ) { + setUrlBatchParams({ + source: undefined, + destination: undefined, + asset: undefined, + }); + } + previousAccountAddressRef.current = defaultAccount?.address; + }, [defaultAccount?.address]); + + // Refetch shielded balance for MASP operations + useEffect(() => { + if (transferType === "shield" || transferType === "unshield") { + refetchShieldedBalance(); + } + }, [transferType, refetchShieldedBalance]); + + // Validate source address - check if it's from keyring or Keplr + useEffect(() => { + const validateSourceAddress = async (): Promise => { + if (!sourceAddressUrl || !userHasAccount || !accounts) return; + + // Check if address is from keyring accounts + const isFromKeyring = accounts?.some( + (account) => account.address === sourceAddressUrl + ); + if (isFromKeyring) return; + + // Check if address is from Keplr + if (connectedWallets?.keplr && !isNamadaAddress(sourceAddressUrl)) { + try { + const keplrInstance = await keplrWalletManager.get(); + if (!keplrInstance) return setSourceAddressUrl(undefined); + // Get the chain from the address + const chain = getChainFromAddress(sourceAddressUrl); + if (!chain) return setSourceAddressUrl(undefined); + + // Try to get the key for this chain + try { + const key = await keplrInstance.getKey(chain.chain_id); + // Check if the address matches the connected Keplr address + if (key.bech32Address === sourceAddressUrl) return; // Valid Keplr address + } catch (error) { + // Chain not connected or error getting key + console.warn("Failed to validate Keplr address:", error); + } + } catch (error) { + console.error("Error validating Keplr address:", error); + } + } + + // If we reach here, the address is not valid - clear it + setUrlBatchParams({ + source: undefined, + destination: undefined, + asset: undefined, + }); + }; + + validateSourceAddress(); + }, [ + sourceAddressUrl, + accounts, + connectedWallets, + userHasAccount, + keplrWalletManager, + setSourceAddressUrl, + ]); if (!userHasAccount) { - return ; + let actionText = "To transfer assets"; + switch (transferType) { + case "shield": + case "unshield": + actionText = "To shield assets"; + break; + case "ibc-deposit": + case "ibc-withdraw": + actionText = "To IBC Transfer"; + break; + } + return ; } + const renderContent = (): JSX.Element => { + if (transferType === "ibc-deposit") { + return ( + + + + ); + } + + if (transferType === "ibc-withdraw") { + return ( + + + + ); + } + + if (transferType === "shield") { + return ( +
    + +
    + ); + } + + if (transferType === "unshield") { + return ( +
    + +
    + ); + } + + return ( +
    + +
    + ); + }; + + // Render sidebar based on transfer type + const renderSidebar = (): JSX.Element => { + const isIbcTransfer = + transferType === "ibc-deposit" || transferType === "ibc-withdraw"; + const isMaspTransfer = + transferType === "shield" || transferType === "unshield"; + + if (isIbcTransfer) return ; + if (isMaspTransfer) { + return ( + <> + + + + ); + } + return ; + }; + return (
    -
    - -
    +
    {renderContent()}
    - - - + {renderSidebar()}     ); }; diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx index 2d24ca9079..3f509304a8 100644 --- a/apps/namadillo/src/App/Transfer/TransferModule.tsx +++ b/apps/namadillo/src/App/Transfer/TransferModule.tsx @@ -1,223 +1,125 @@ -import { Chain } from "@chain-registry/types"; import { ActionButton, Stack } from "@namada/components"; -import { mapUndefined } from "@namada/utils"; import { IconTooltip } from "App/Common/IconTooltip"; import { InlineError } from "App/Common/InlineError"; -import { routes } from "App/routes"; +import { params, routes } from "App/routes"; +import { + namadaShieldedAssetsAtom, + namadaTransparentAssetsAtom, +} from "atoms/balance"; import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations"; import BigNumber from "bignumber.js"; import clsx from "clsx"; +import { useAssetsWithAmounts } from "hooks/useAssetsWithAmounts"; import { useKeychainVersion } from "hooks/useKeychainVersion"; -import { TransactionFeeProps } from "hooks/useTransactionFee"; -import { wallets } from "integrations"; import { useAtomValue } from "jotai"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo } from "react"; import { BsQuestionCircleFill } from "react-icons/bs"; -import { Link, useLocation, useNavigate } from "react-router-dom"; import { - Address, - AssetWithAmount, - BaseDenom, - GasConfig, - LedgerAccountInfo, - WalletProvider, -} from "types"; + Link, + useLocation, + useNavigate, + useSearchParams, +} from "react-router-dom"; +import { AssetWithAmountAndChain } from "types"; import { filterAvailableAssetsWithBalance } from "utils/assets"; -import { checkKeychainCompatibleWithMasp } from "utils/compatibility"; import { getDisplayGasFee } from "utils/gas"; -import { - isShieldedAddress, - isTransparentAddress, - parseChainInfo, -} from "./common"; +import { isIbcAddress, isShieldedAddress } from "./common"; import { CurrentStatus } from "./CurrentStatus"; import { IbcChannels } from "./IbcChannels"; -import { SelectAssetModal } from "./SelectAssetModal"; -import { SelectChainModal } from "./SelectChainModal"; -import { SelectWalletModal } from "./SelectWalletModal"; +import { SelectToken } from "./SelectToken"; import { SuccessAnimation } from "./SuccessAnimation"; import { TransferArrow } from "./TransferArrow"; import { TransferDestination } from "./TransferDestination"; import { TransferSource } from "./TransferSource"; - -type TransferModuleConfig = { - wallet?: WalletProvider; - walletAddress?: string; - availableWallets?: WalletProvider[]; - connected?: boolean; - availableChains?: Chain[]; - chain?: Chain; - isShieldedAddress?: boolean; - onChangeWallet?: (wallet: WalletProvider) => void; - onChangeChain?: (chain: Chain) => void; - onChangeShielded?: (isShielded: boolean) => void; - isSyncingMasp?: boolean; - // Additional information if selected account is a ledger - ledgerAccountInfo?: LedgerAccountInfo; -}; - -export type TransferSourceProps = TransferModuleConfig & { - availableAssets?: Record; - isLoadingAssets?: boolean; - selectedAssetAddress?: Address; - availableAmount?: BigNumber; - onChangeSelectedAsset?: (address: Address | undefined) => void; - amount?: BigNumber; - onChangeAmount?: (amount: BigNumber | undefined) => void; -}; - -export type IbcOptions = { - sourceChannel: string; - onChangeSourceChannel: (channel: string) => void; - destinationChannel?: string; - onChangeDestinationChannel?: (channel: string) => void; -}; - -export type TransferDestinationProps = TransferModuleConfig & { - enableCustomAddress?: boolean; - customAddress?: Address; - onChangeCustomAddress?: (address: Address) => void; - onChangeShielded?: (shielded: boolean) => void; -}; - -export type OnSubmitTransferParams = { - displayAmount: BigNumber; - destinationAddress: Address; - memo?: string; -}; - -export type TransferModuleProps = { - source: TransferSourceProps; - destination: TransferDestinationProps; - onSubmitTransfer?: (params: OnSubmitTransferParams) => void; - requiresIbcChannels?: boolean; - gasConfig?: GasConfig; - feeProps?: TransactionFeeProps; - changeFeeEnabled?: boolean; - submittingText?: string; - isSubmitting?: boolean; - errorMessage?: string; - currentStatus?: string; - currentStatusExplanation?: string; - completedAt?: Date; - isShieldedTx?: boolean; - isSyncingMasp?: boolean; - buttonTextErrors?: Partial>; - onComplete?: () => void; -} & ( - | { ibcTransfer?: undefined; ibcOptions?: undefined } - | { ibcTransfer: "deposit" | "withdraw"; ibcOptions: IbcOptions } -); - -type ValidationResult = - | "NoAmount" - | "NoSourceWallet" - | "NoSourceChain" - | "NoSelectedAsset" - | "NoDestinationWallet" - | "NoDestinationChain" - | "NoTransactionFee" - | "NotEnoughBalance" - | "NotEnoughBalanceForFees" - | "KeychainNotCompatibleWithMasp" - | "CustomAddressNotMatchingChain" - | "TheSameAddress" - | "NoLedgerConnected" - | "Ok"; - -// Check if the provided address is valid for the destination chain and transaction type -const isValidDestinationAddress = ({ - customAddress, - chain, -}: { - customAddress: string; - chain: Chain | undefined; -}): boolean => { - // Skip validation if no custom address or chain provided - if (!customAddress || !chain || !chain.bech32_prefix) return true; - - // Check shielded/transparent address requirements for Namada - if (chain.bech32_prefix === "tnam") { - return ( - isTransparentAddress(customAddress) || isShieldedAddress(customAddress) - ); - } - - // For non-Namada chains, validate using prefix - return customAddress.startsWith(chain.bech32_prefix); -}; +import { TransferModuleProps, ValidationResult } from "./types"; +import { getButtonText, validateTransferForm } from "./utils"; export const TransferModule = ({ source, destination, - gasConfig: gasConfigProp, feeProps, - changeFeeEnabled, - submittingText, isSubmitting, - ibcTransfer, - ibcOptions, - requiresIbcChannels, - onSubmitTransfer, errorMessage, currentStatus, currentStatusExplanation, + gasConfig: gasConfigProp, + onSubmitTransfer, completedAt, onComplete, - buttonTextErrors = {}, - isSyncingMasp = false, - isShieldedTx = false, + ibcChannels, + requiresIbcChannels, + keplrWalletManager, + assetSelectorModalOpen = false, + setAssetSelectorModalOpen = () => {}, }: TransferModuleProps): JSX.Element => { + const sourceAddress = source.address ?? ""; + const destinationAddress = destination.address ?? ""; + const { data: usersAssets, isLoading: isLoadingUsersAssets } = useAtomValue( + isShieldedAddress(sourceAddress) ? + namadaShieldedAssetsAtom + : namadaTransparentAssetsAtom + ); + const [searchParams, setSearchParams] = useSearchParams(); + const asset = searchParams.get(params.asset) || ""; + const assetsWithAmounts = useAssetsWithAmounts(sourceAddress); + const selectedAsset = assetsWithAmounts.find( + (assetWithAmount) => assetWithAmount.asset.symbol === asset + ); + + const availableAmount = selectedAsset?.amount; + const availableAssets = useMemo(() => { + return filterAvailableAssetsWithBalance(usersAssets); + }, [usersAssets]); + const chainAssets = useAtomValue(namadaRegistryChainAssetsMapAtom); + const navigate = useNavigate(); const location = useLocation(); - const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false); - const [sourceChainModalOpen, setSourceChainModalOpen] = useState(false); - const [destinationChainModalOpen, setDestinationChainModalOpen] = - useState(false); - const [assetSelectorModalOpen, setAssetSelectorModalOpen] = useState(false); - const [customAddressActive, setCustomAddressActive] = useState( - destination.enableCustomAddress && !destination.availableWallets - ); - const [memo, setMemo] = useState(); const keychainVersion = useKeychainVersion(); - const chainAssetsMap = useAtomValue(namadaRegistryChainAssetsMapAtom); + const isTargetShielded = isShieldedAddress(destinationAddress); + const isSourceShielded = isShieldedAddress(sourceAddress); + const isShielding = + isShieldedAddress(destinationAddress) && !isShieldedAddress(sourceAddress); + const isUnshielding = + isShieldedAddress(sourceAddress) && !isShieldedAddress(destinationAddress); + const isShieldedTx = isShieldedAddress(sourceAddress); + const buttonColor = isTargetShielded || isSourceShielded ? "yellow" : "white"; + const ibcTransfer = + isIbcAddress(destinationAddress) || isIbcAddress(sourceAddress); + + const getButtonTextFromValidation = (): string => { + const buttonTextErrors = + isShielding || isUnshielding ? + { + NoAmount: + isShielding ? "Define an amount to shield" + : isUnshielding ? "Define an amount to unshield" + : "", + } + : {}; + + return getButtonText({ + isSubmitting, + validationResult, + availableAmountMinusFees, + buttonTextErrors, + }); + }; - const chainAssets = Object.values(chainAssetsMap.data || {}) ?? []; const gasConfig = gasConfigProp ?? feeProps?.gasConfig; const displayGasFee = useMemo(() => { return gasConfig ? - getDisplayGasFee(gasConfig, chainAssetsMap.data || {}) + getDisplayGasFee(gasConfig, chainAssets.data ?? {}) : undefined; }, [gasConfig]); - const availableAssets: Record = - useMemo(() => { - return filterAvailableAssetsWithBalance(source.availableAssets); - }, [source.availableAssets]); - - const firstAvailableAsset = Object.values(availableAssets)[0]; - - const selectedAsset = mapUndefined( - (address) => source.availableAssets?.[address], - source.selectedAssetAddress - ); - const availableAmountMinusFees = useMemo(() => { - const { selectedAssetAddress, availableAmount } = source; - - if ( - typeof selectedAssetAddress === "undefined" || - typeof availableAmount === "undefined" || - typeof availableAssets === "undefined" - ) { - return undefined; - } + if (!availableAmount || !availableAssets) return; if ( !displayGasFee?.totalDisplayAmount || // Don't subtract if the gas token is different than the selected asset: - gasConfig?.gasToken !== selectedAssetAddress + gasConfig?.gasToken !== selectedAsset?.asset.address ) { return availableAmount; } @@ -227,250 +129,56 @@ export const TransferModule = ({ .decimalPlaces(6); return BigNumber.max(amountMinusFees, 0); - }, [source.selectedAssetAddress, source.availableAmount, displayGasFee]); + }, [selectedAsset?.asset.address, availableAmount, displayGasFee]); const validationResult = useMemo((): ValidationResult => { - if (!source.wallet) { - return "NoSourceWallet"; - } else if (source.walletAddress === destination.customAddress) { - return "TheSameAddress"; - } else if ( - !isValidDestinationAddress({ - customAddress: destination.customAddress ?? "", - chain: destination.chain, - }) - ) { - return "CustomAddressNotMatchingChain"; - } else if ( - (source.isShieldedAddress || destination.isShieldedAddress) && - keychainVersion && - !checkKeychainCompatibleWithMasp(keychainVersion) - ) { - return "KeychainNotCompatibleWithMasp"; - } else if (!source.chain) { - return "NoSourceChain"; - } else if (!destination.chain) { - return "NoDestinationChain"; - } else if (!source.selectedAssetAddress) { - return "NoSelectedAsset"; - } else if (!hasEnoughBalanceForFees()) { - return "NotEnoughBalanceForFees"; - } else if (!source.amount || source.amount.eq(0)) { - return "NoAmount"; - } else if ( - !availableAmountMinusFees || - source.amount.gt(availableAmountMinusFees) - ) { - return "NotEnoughBalance"; - } else if (!destination.wallet && !destination.customAddress) { - return "NoDestinationWallet"; - } else if ( - (source.isShieldedAddress || destination.isShieldedAddress) && - source.ledgerAccountInfo && - !source.ledgerAccountInfo.deviceConnected - ) { - return "NoLedgerConnected"; - } else { - return "Ok"; - } - }, [source, destination, gasConfig, availableAmountMinusFees]); + return validateTransferForm({ + source: { + asset: selectedAsset?.asset, + address: sourceAddress, + isShieldedAddress: isShieldedAddress(sourceAddress), + selectedAssetSymbol: selectedAsset?.asset.symbol, + amount: source.amount, + ledgerAccountInfo: source.ledgerAccountInfo, + }, + destination: { + address: destinationAddress, + isShieldedAddress: isShieldedAddress(destinationAddress), + }, + gasConfig, + availableAmountMinusFees, + keychainVersion, + availableAssets, + displayGasFeeAmount: displayGasFee?.totalDisplayAmount, + }); + }, [ + sourceAddress, + selectedAsset?.asset.address, + source.amount, + source.ledgerAccountInfo, + gasConfig, + availableAmountMinusFees, + keychainVersion, + availableAssets, + displayGasFee, + ]); const onSubmit = (e: React.FormEvent): void => { e.preventDefault(); - const address = destination.customAddress || destination.walletAddress; - if (!source.amount) { - throw new Error("Amount is not valid"); - } - - if (!address) { - throw new Error("Address is not provided"); - } - - if (!source.selectedAssetAddress) { - throw new Error("Asset is not selected"); - } - - const params: OnSubmitTransferParams = { + onSubmitTransfer({ displayAmount: source.amount, - destinationAddress: address.trim(), - memo, - }; - - onSubmitTransfer?.(params); - }; - - const onChangeWallet = (config: TransferModuleConfig) => (): void => { - // No callback available, do nothing - if (!config.onChangeWallet) return; - - // User may choose between multiple options - if ((config.availableWallets || []).length > 1) { - setWalletSelectorModalOpen(true); - return; - } - - // Fallback to default wallet prop - if (!config.availableWallets && config.wallet) { - config.onChangeWallet(config.wallet); - return; - } - - // Do nothing if no alternatives are provided - if (!config.availableWallets) { - return; - } - - // Do nothing if wallet address is set, and no other wallet is available - if (config.walletAddress && config.availableWallets.length <= 1) { - return; - } - - setWalletSelectorModalOpen(true); - }; - - function hasEnoughBalanceForFees(): boolean { - // Skip if transaction fees will be handled by another wallet, like Keplr. - // (Ex: when users transfer from IBC to Namada) - if (source.wallet && source.wallet !== wallets.namada) { - return true; - } - - if (!availableAssets || !gasConfig || !displayGasFee) { - return false; - } - - // Find how much the user has in their account for the selected fee token - const feeTokenAddress = gasConfig.gasToken; - - if (!availableAssets.hasOwnProperty(feeTokenAddress)) { - return false; - } - - const assetDisplayAmount = availableAssets[feeTokenAddress].amount; - const feeDisplayAmount = displayGasFee?.totalDisplayAmount; - - return assetDisplayAmount.gt(feeDisplayAmount); - } - - const filteredAvailableAssets = useMemo(() => { - // Get available assets that are accepted by the chain - return Object.values(availableAssets).filter(({ asset }) => { - if (!source.chain) return true; - return chainAssets.some( - (chainAsset) => - chainAsset?.symbol.toLowerCase() === asset?.symbol.toLowerCase() - ); + destinationAddress, + sourceAddress, + memo: destination.memo, }); - }, [availableAssets, source.chain, chainAssets]); - - const sortedAssets = useMemo(() => { - if (!filteredAvailableAssets.length) { - return []; - } - - // Sort filtered assets by amount - return [...filteredAvailableAssets].sort( - (asset1: AssetWithAmount, asset2: AssetWithAmount) => { - return asset1.amount.gt(asset2.amount) ? -1 : 1; - } - ); - }, [filteredAvailableAssets]); - - const getButtonTextError = ( - id: ValidationResult, - defaultText: string - ): string => { - if (buttonTextErrors.hasOwnProperty(id) && buttonTextErrors[id]) { - return buttonTextErrors[id]; - } - - return defaultText; }; - const getButtonText = (): string | JSX.Element => { - if (isSubmitting) { - return submittingText || "Submitting..."; - } - - const getText = getButtonTextError.bind(null, validationResult); - switch (validationResult) { - case "NoSourceWallet": - return getText("Select Wallet"); - case "TheSameAddress": - return getText("Source and destination addresses are the same"); - - case "NoSourceChain": - case "NoDestinationChain": - return getText("Select Chain"); - - case "NoSelectedAsset": - return getText("Select Asset"); - case "NoDestinationWallet": - return getText("Select Destination Wallet"); - - case "NoAmount": - return getText("Define an amount to transfer"); - - case "NoTransactionFee": - return getText("No transaction fee is set"); - - case "CustomAddressNotMatchingChain": - return getText("Custom address does not match chain"); - case "NotEnoughBalance": - return getText("Not enough balance"); - case "NotEnoughBalanceForFees": - return getText("Not enough balance to pay for transaction fees"); - case "KeychainNotCompatibleWithMasp": - return getText("Keychain is not compatible with MASP"); - case "NoLedgerConnected": - return getText("Connect your ledger and open the Namada App"); - } - - if (!availableAmountMinusFees) { - return getText("Wallet amount not available"); - } - - return "Submit"; - }; - - const buttonColor = - destination.isShieldedAddress || source.isShieldedAddress ? - "yellow" - : "white"; - - const renderLedgerTooltip = useCallback( - () => ( - } - text={ - - If your device is connected and the app is open, please go to{" "} - { - e.preventDefault(); - navigate(routes.settingsLedger, { - state: { backgroundLocation: location }, - }); - }} - to={routes.settingsLedger} - className="text-yellow" - > - Settings - {" "} - and pair your device with Namadillo. - - } - /> - ), - [] - ); - + // Set the selected asset in the parent component from the URL state if it's not set useEffect(() => { - if (!selectedAsset?.asset && firstAvailableAsset) { - source.onChangeSelectedAsset?.(firstAvailableAsset?.asset.address); + if (!source.selectedAssetWithAmount && selectedAsset) { + source.onChangeSelectedAsset(selectedAsset); } - }, [firstAvailableAsset]); + }, [selectedAsset]); return ( <> @@ -484,85 +192,53 @@ export const TransferModule = ({ onSubmit={onSubmit} > setSourceChainModalOpen(true) - : undefined - } openAssetSelector={ - source.onChangeSelectedAsset && !isSubmitting ? - () => setAssetSelectorModalOpen(true) - : undefined + !isSubmitting ? () => setAssetSelectorModalOpen(true) : undefined } onChangeAmount={source.onChangeAmount} - isShieldedAddress={source.isShieldedAddress} - onChangeShielded={source.onChangeShielded} isSubmitting={isSubmitting} /> - destination.onChangeWallet && destination.wallet ? - destination.onChangeWallet(destination.wallet) - : undefined - } - openChainSelector={ - destination.onChangeChain && !isSubmitting ? - () => setDestinationChainModalOpen(true) - : undefined - } - onChangeAddress={destination.onChangeCustomAddress} - memo={memo} - onChangeMemo={setMemo} + destinationAddress={destinationAddress} + sourceAsset={selectedAsset?.asset} + sourceAddress={sourceAddress} + onChangeAddress={destination.onChangeAddress} + memo={destination.memo} + onChangeMemo={destination.onChangeMemo} feeProps={feeProps} - changeFeeEnabled={changeFeeEnabled} gasDisplayAmount={displayGasFee?.totalDisplayAmount} gasAsset={displayGasFee?.asset} destinationAsset={selectedAsset?.asset} amount={source.amount} isSubmitting={isSubmitting} /> - {ibcTransfer && requiresIbcChannels && ( + {ibcTransfer && requiresIbcChannels && ibcChannels && ( )} {!isSubmitting && } @@ -572,7 +248,7 @@ export const TransferModule = ({ explanation={currentStatusExplanation} /> )} - {!isSubmitting && onSubmitTransfer && ( + {!isSubmitting && (
    - {getButtonText()} + {getButtonTextFromValidation()} - - {validationResult === "NoLedgerConnected" && - renderLedgerTooltip()} + {validationResult === "NoLedgerConnected" && ( + + } + text={ + + If your device is connected and the app is open, please go + to{" "} + { + e.preventDefault(); + navigate(routes.settingsLedger, { + state: { backgroundLocation: location }, + }); + }} + to={routes.settingsLedger} + className="text-yellow" + > + Settings + {" "} + and pair your device with Namadillo. + + } + /> + )}
    )} {validationResult === "KeychainNotCompatibleWithMasp" && ( @@ -604,54 +304,33 @@ export const TransferModule = ({ /> )} - - {walletSelectorModalOpen && - source.onChangeWallet && - source.availableWallets && ( - setWalletSelectorModalOpen(false)} - onConnect={source.onChangeWallet} - /> - )} - - {assetSelectorModalOpen && - source.onChangeSelectedAsset && - source.wallet && - source.walletAddress && ( - setAssetSelectorModalOpen(false)} - assets={sortedAssets.map( - (assetsWithAmount) => assetsWithAmount.asset - )} - onSelect={source.onChangeSelectedAsset} - wallet={source.wallet} - walletAddress={source.walletAddress} - ibcTransfer={ibcTransfer} - /> - )} - - {sourceChainModalOpen && source.onChangeChain && source.wallet && ( - setSourceChainModalOpen(false)} - chains={source.availableChains || []} - onSelect={source.onChangeChain} - wallet={source.wallet} - walletAddress={source.walletAddress} - /> - )} - - {destinationChainModalOpen && - destination.onChangeChain && - destination.wallet && ( - setDestinationChainModalOpen(false)} - chains={destination.availableChains || []} - onSelect={destination.onChangeChain} - wallet={destination.wallet} - walletAddress={destination.walletAddress} - /> - )} + setAssetSelectorModalOpen(false)} + assetsWithAmounts={assetsWithAmounts} + onSelect={( + selectedAssetWithAmount: AssetWithAmountAndChain, + newSourceAddress?: string + ) => { + // Batch both URL updates together + setSearchParams((prev) => { + const newParams = new URLSearchParams(prev); + if (newSourceAddress) { + newParams.set("source", newSourceAddress); + } + newParams.set(params.asset, selectedAssetWithAmount.asset.symbol); + return newParams; + }); + + source.onChangeAmount(undefined); + source.onChangeSelectedAsset(selectedAssetWithAmount); + setAssetSelectorModalOpen(false); + }} + /> ); }; diff --git a/apps/namadillo/src/App/Transfer/TransferSource.tsx b/apps/namadillo/src/App/Transfer/TransferSource.tsx index 613d993c6e..e52ef11abc 100644 --- a/apps/namadillo/src/App/Transfer/TransferSource.tsx +++ b/apps/namadillo/src/App/Transfer/TransferSource.tsx @@ -1,39 +1,30 @@ -import { Chain } from "@chain-registry/types"; -import { AmountInput } from "@namada/components"; -import { TabSelector } from "App/Common/TabSelector"; -import { MaspSyncIndicator } from "App/Layout/MaspSyncIndicator"; +import { Asset } from "@chain-registry/types"; +import { AmountInput, Tooltip } from "@namada/components"; import BigNumber from "bignumber.js"; import clsx from "clsx"; -import { Asset, WalletProvider } from "types"; +import { wallets } from "integrations"; +import { Address } from "types"; +import namadaShieldedIcon from "./assets/namada-shielded.svg"; +import namadaTransparentIcon from "./assets/namada-transparent.svg"; import { AvailableAmountFooter } from "./AvailableAmountFooter"; -import { ConnectProviderButton } from "./ConnectProviderButton"; +import { isShieldedAddress, isTransparentAddress } from "./common"; import { SelectedAsset } from "./SelectedAsset"; -import { SelectedChain } from "./SelectedChain"; -import { SelectedWallet } from "./SelectedWallet"; import { TokenAmountCard } from "./TokenAmountCard"; -export const isNamada = (chain: Chain): boolean => { - return ["namada", "namadahousefire"].includes(chain.chain_name); -}; - export type TransferSourceProps = { - isConnected: boolean; - wallet?: WalletProvider; - walletAddress?: string; - asset?: Asset; isLoadingAssets?: boolean; isSubmitting?: boolean; - isSyncingMasp?: boolean; - chain?: Chain; - openChainSelector?: () => void; - openAssetSelector?: () => void; - openProviderSelector?: () => void; - amount?: BigNumber; + isShieldingTxn?: boolean; + asset?: Asset; + originalAddress?: Address; + sourceAddress?: string; availableAmount?: BigNumber; availableAmountMinusFees?: BigNumber; + amount?: BigNumber; + selectedTokenType?: "shielded" | "transparent" | "keplr"; + openAssetSelector?: () => void; + openProviderSelector?: () => void; onChangeAmount?: (amount: BigNumber | undefined) => void; - isShieldedAddress?: boolean; - onChangeShielded?: (isShielded: boolean) => void; }; const amountMaxDecimalPlaces = (asset?: Asset): number | undefined => { @@ -47,111 +38,94 @@ const amountMaxDecimalPlaces = (asset?: Asset): number | undefined => { return undefined; }; +const getWalletIcon = ( + sourceAddress?: string, + selectedTokenType?: "shielded" | "transparent" | "keplr" +): string => { + if (!sourceAddress) return ""; + + // Use selected token type if available, otherwise fall back to source address format + if (selectedTokenType) { + switch (selectedTokenType) { + case "shielded": + return namadaShieldedIcon; + case "transparent": + return namadaTransparentIcon; + case "keplr": + return wallets.keplr.iconUrl; + default: + break; + } + } + + // Fallback to original logic if token type not specified + if (isShieldedAddress(sourceAddress)) { + return namadaShieldedIcon; + } else if (isTransparentAddress(sourceAddress)) { + return namadaTransparentIcon; + } else { + return wallets.keplr.iconUrl; + } +}; + export const TransferSource = ({ - chain, - asset, isLoadingAssets, - wallet, - walletAddress, - openProviderSelector, - openChainSelector, - openAssetSelector, + isSubmitting, + asset, + originalAddress, availableAmount, availableAmountMinusFees, amount, + sourceAddress, + openAssetSelector, onChangeAmount, - isShieldedAddress, - isSyncingMasp, - onChangeShielded, - isSubmitting, }: TransferSourceProps): JSX.Element => { + const selectedTokenType = + isTransparentAddress(sourceAddress ?? "") ? "transparent" + : isShieldedAddress(sourceAddress ?? "") ? "shielded" + : "keplr"; + return ( -
    - {/** Intro header - Ex: "IBC To Namada" */} - {onChangeShielded && chain && isNamada(chain) && !isSubmitting && ( -
    - } - syncedChildren={
    Shielded sync completed
    } - /> - - )} - - ), - className: - isShieldedAddress ? "text-yellow" : ( - clsx("text-yellow/50", { - "hover:text-yellow/80": !isSyncingMasp, - }) - ), - buttonProps: { disabled: isSyncingMasp }, - }, - { - id: "transparent", - text: "Transparent", - className: - !isShieldedAddress ? "text-white" : ( - "text-white/50 hover:text-white/80" - ), - }, - ]} - onChange={() => onChangeShielded(!isShieldedAddress)} - /> - +
    - - {!walletAddress && ( - - )} - {walletAddress && wallet && ( - + {sourceAddress && ( +
    +
    + Wallet icon + + {sourceAddress} + +
    +
    )}
    -
    - {/** Asset selector */} {!isSubmitting && ( -
    - +
    onChangeAmount?.(e.target.value)} placeholder="Amount" @@ -160,13 +134,13 @@ export const TransferSource = ({
    )} - {/** Available amount footer */} {!isSubmitting && asset && availableAmountMinusFees && (