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.name} - - {asset.symbol} - {!isDisabled && ( - - - - )} - + + {`${asset.name} + + {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 (

    Shielded Swaps

    - - - -

    Swap an asset you hold in the shield pool

    ); }; 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