diff --git a/apps/namadillo/src/App/Common/SelectAssetModal.tsx b/apps/namadillo/src/App/Common/SelectAssetModal.tsx
index bb9cb9c705..5d490aee1f 100644
--- a/apps/namadillo/src/App/Common/SelectAssetModal.tsx
+++ b/apps/namadillo/src/App/Common/SelectAssetModal.tsx
@@ -36,13 +36,74 @@ export const SelectAssetModal = ({
const [filter, setFilter] = useState("");
- const filteredAssets = useMemo(() => {
- return assets.filter(
+ const { assetsWithBalance, assetsWithoutBalance } = useMemo(() => {
+ const filtered = assets.filter(
(asset) =>
asset.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 ||
asset.symbol.toLowerCase().indexOf(filter.toLowerCase()) >= 0
);
- }, [assets, filter]);
+
+ const withBalance: Asset[] = [];
+ const withoutBalance: Asset[] = [];
+
+ filtered.forEach((asset) => {
+ const tokenAddress =
+ ibcTransfer === "deposit" ? asset.base : (asset as NamadaAsset).address;
+
+ const balance = balances?.[tokenAddress];
+ const hasBalance = balance && balance[0].gt(0);
+
+ if (hasBalance) {
+ withBalance.push(asset);
+ } else {
+ withoutBalance.push(asset);
+ }
+ });
+
+ return {
+ assetsWithBalance: withBalance,
+ assetsWithoutBalance: withoutBalance,
+ };
+ }, [assets, filter, balances, ibcTransfer]);
+
+ const renderAssetItem = (asset: Asset): JSX.Element => {
+ // Fpr IbcTransfer(Deposits), we consider base denom as a token address.
+ const tokenAddress =
+ ibcTransfer === "deposit" ? asset.base : (asset as NamadaAsset).address;
+
+ const disabled =
+ !namTransfersEnabled && asset.address === nativeTokenAddress;
+
+ return (
+
+
+
+ );
+ };
+
+ const hasAnyAssets =
+ assetsWithBalance.length > 0 || assetsWithoutBalance.length > 0;
return (
@@ -50,51 +111,33 @@ export const SelectAssetModal = ({
-
- {filteredAssets.map((asset) => {
- // Fpr IbcTransfer(Deposits), we consider base denom as a token address.
- const tokenAddress =
- ibcTransfer === "deposit" ?
- asset.base
- : (asset as NamadaAsset).address;
-
- const disabled =
- !namTransfersEnabled && asset.address === nativeTokenAddress;
- return (
-
-
-
- );
- })}
- {filteredAssets.length === 0 && (
- There are no available assets
+
+ {assetsWithBalance.length > 0 && (
+ <>
+
+ Your tokens
+
+
+ {assetsWithBalance.map(renderAssetItem)}
+
+ >
+ )}
+
+ {assetsWithoutBalance.length > 0 && (
+ <>
+
+ All tokens
+
+
+ {assetsWithoutBalance.map(renderAssetItem)}
+
+ >
)}
-
+
+ {!hasAnyAssets && (
+
There are no available assets
+ )}
+
);
};
diff --git a/apps/namadillo/src/App/Common/SelectedAsset.tsx b/apps/namadillo/src/App/Common/SelectedAsset.tsx
index e0729cd86a..0494098ddf 100644
--- a/apps/namadillo/src/App/Common/SelectedAsset.tsx
+++ b/apps/namadillo/src/App/Common/SelectedAsset.tsx
@@ -1,4 +1,4 @@
-import { SkeletonLoading, Tooltip } from "@namada/components";
+import { SkeletonLoading } from "@namada/components";
import { EmptyResourceIcon } from "App/Transfer/EmptyResourceIcon";
import clsx from "clsx";
import { getAssetImageUrl } from "integrations/utils";
@@ -8,6 +8,7 @@ import { Asset } from "types";
type SelectedAssetProps = {
asset?: Asset;
isLoading?: boolean;
+ imageSize?: "small" | "large";
isDisabled?: boolean;
onClick?: () => void;
};
@@ -15,6 +16,7 @@ type SelectedAssetProps = {
export const SelectedAsset = ({
asset,
isLoading,
+ imageSize = "small",
isDisabled,
onClick,
}: SelectedAssetProps): JSX.Element => {
@@ -53,29 +55,25 @@ export const SelectedAsset = ({
)}
{asset && (
-
-
- {asset.address}
-
-
-
-
- {asset.symbol}
- {!isDisabled && (
-
-
-
- )}
-
+
+
+
+ {asset.symbol}
+ {!isDisabled && (
+
+
+
+ )}
-
+
)}
);
diff --git a/apps/namadillo/src/App/Swap/SwapHeader.tsx b/apps/namadillo/src/App/Swap/SwapHeader.tsx
index d1c8e599fc..7370cb20e7 100644
--- a/apps/namadillo/src/App/Swap/SwapHeader.tsx
+++ b/apps/namadillo/src/App/Swap/SwapHeader.tsx
@@ -1,13 +1,7 @@
-import { SwapIcon } from "App/Icons/SwapIcon";
-
export const SwapHeader = (): JSX.Element => {
return (
);
};
diff --git a/apps/namadillo/src/App/Swap/SwapModule.tsx b/apps/namadillo/src/App/Swap/SwapModule.tsx
index 527728f44e..7481fb0c9f 100644
--- a/apps/namadillo/src/App/Swap/SwapModule.tsx
+++ b/apps/namadillo/src/App/Swap/SwapModule.tsx
@@ -1,4 +1,6 @@
import { Panel } from "@namada/components";
+import { MaspSyncCover } from "App/Common/MaspSyncCover";
+import { useRequiresNewShieldedSync } from "hooks/useRequiresNewShieldedSync";
import { useAtomValue } from "jotai";
import { Link } from "react-router-dom";
import { swapStatusAtom } from "./state/atoms";
@@ -12,6 +14,7 @@ import { SwapSuccess } from "./SwapSuccess";
// and pass the shared state(accounts, fees, etc.) as props to the module components
export const SwapModule = (): JSX.Element => {
const status = useAtomValue(swapStatusAtom);
+ const requiresNewShieldedSync = useRequiresNewShieldedSync();
return (
@@ -44,6 +47,7 @@ export const SwapModule = (): JSX.Element => {
)}
+ {requiresNewShieldedSync && }
);
};
diff --git a/apps/namadillo/src/App/Swap/SwapSource.tsx b/apps/namadillo/src/App/Swap/SwapSource.tsx
index 4a60b13d0f..4cfabaab44 100644
--- a/apps/namadillo/src/App/Swap/SwapSource.tsx
+++ b/apps/namadillo/src/App/Swap/SwapSource.tsx
@@ -41,6 +41,7 @@ export const SwapSource = ({
{!isSubmitting && (
To
- {isShieldedAddress(receiver ?? "") ?
+ {(
+ isShieldedAddress(receiver ?? "") ||
+ transaction.type === "ShieldedOsmosisSwap"
+ ) ?
Shielded