diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json index 3e2be31d5..0537ca646 100644 --- a/apps/namadillo/package.json +++ b/apps/namadillo/package.json @@ -27,6 +27,7 @@ "jotai": "^2.6.3", "jotai-tanstack-query": "^0.8.5", "lodash.debounce": "^4.0.8", + "namada-chain-registry": "https://github.com/anoma/namada-chain-registry", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.1.0", diff --git a/apps/namadillo/src/App/Ibc/IbcTransfer.tsx b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx index e743151a4..0ea85b462 100644 --- a/apps/namadillo/src/App/Ibc/IbcTransfer.tsx +++ b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx @@ -1,4 +1,4 @@ -import { Asset, Chain } from "@chain-registry/types"; +import { Chain } from "@chain-registry/types"; import { Window as KeplrWindow } from "@keplr-wallet/types"; import { mapUndefined } from "@namada/utils"; import { TransactionTimeline } from "App/Common/TransactionTimeline"; @@ -8,19 +8,20 @@ import { } from "App/Transfer/TransferModule"; import { allDefaultAccountsAtom } from "atoms/accounts"; import { + assetBalanceAtomFamily, availableChainsAtom, chainRegistryAtom, ibcTransferAtom, } from "atoms/integrations"; import clsx from "clsx"; import { AnimatePresence, motion } from "framer-motion"; -import { useAssetAmount } from "hooks/useAssetAmount"; import { useWalletManager } from "hooks/useWalletManager"; import { wallets } from "integrations"; import { KeplrWalletManager } from "integrations/Keplr"; import { useAtomValue } from "jotai"; import { useEffect, useMemo, useState } from "react"; import namadaChain from "registry/namada.json"; +import { Address } from "types"; import { IbcTopHeader } from "./IbcTopHeader"; import * as cosmos from "chain-registry/mainnet/cosmoshub"; @@ -33,7 +34,7 @@ export const IbcTransfer: React.FC = () => { const chainRegistry = useAtomValue(chainRegistryAtom); const availableChains = useAtomValue(availableChainsAtom); const [shielded, setShielded] = useState(true); - const [selectedAsset, setSelectedAsset] = useState(); + const [selectedAssetAddress, setSelectedAssetAddress] = useState
(); const [currentStep, setCurrentStep] = useState(0); const [generalErrorMessage, setGeneralErrorMessage] = useState(""); const performIbcTransfer = useAtomValue(ibcTransferAtom); @@ -45,15 +46,17 @@ export const IbcTransfer: React.FC = () => { chainId, } = useWalletManager(keplr); - const { - balance: availableAmount, - availableAssets, - isLoading: isLoadingBalances, - } = useAssetAmount({ - registry, - asset: selectedAsset, - walletAddress: sourceAddress, - }); + const { data: availableAssets, isLoading: isLoadingBalances } = useAtomValue( + assetBalanceAtomFamily({ + chain: registry?.chain, + walletAddress: sourceAddress, + }) + ); + + const availableAmount = mapUndefined( + (address) => availableAssets?.[address]?.amount, + selectedAssetAddress + ); const transactionFee = useMemo(() => { if (typeof registry !== "undefined") { @@ -63,7 +66,7 @@ export const IbcTransfer: React.FC = () => { }, [registry]); useEffect(() => { - setSelectedAsset(undefined); + setSelectedAssetAddress(undefined); }, [registry]); const namadaAddress = useMemo(() => { @@ -90,6 +93,11 @@ export const IbcTransfer: React.FC = () => { throw new Error("Chain ID is undefined"); } + const selectedAsset = mapUndefined( + (address) => availableAssets?.[address], + selectedAssetAddress + ); + if (!selectedAsset) { throw new Error("No asset is selected"); } @@ -182,7 +190,7 @@ export const IbcTransfer: React.FC = () => { source={{ isLoadingAssets: isLoadingBalances, availableAssets, - selectedAsset, + selectedAssetAddress, availableAmount, availableChains, onChangeChain, @@ -191,7 +199,7 @@ export const IbcTransfer: React.FC = () => { wallet: wallets.keplr, walletAddress: sourceAddress, onChangeWallet, - onChangeSelectedAsset: setSelectedAsset, + onChangeSelectedAsset: setSelectedAssetAddress, }} destination={{ chain: namadaChain as Chain, diff --git a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx index 85c85c925..4be84ed4e 100644 --- a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx +++ b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx @@ -1,4 +1,4 @@ -import { Asset, Chain } from "@chain-registry/types"; +import { Chain } from "@chain-registry/types"; import { WindowWithNamada } from "@namada/types"; import { mapUndefined } from "@namada/utils"; import { @@ -16,6 +16,7 @@ import { useAtomValue } from "jotai"; import { useState } from "react"; import namadaChainRegistry from "registry/namada.json"; import { namadaAsset } from "registry/namadaAsset"; +import { Address, AddressWithAssetAndAmountMap } from "types"; import { getSdkInstance } from "utils/sdk"; import { IbcTopHeader } from "./IbcTopHeader"; @@ -30,16 +31,26 @@ export const IbcWithdraw: React.FC = () => { const namadaChainParams = useAtomValue(chainParametersAtom); const namadaChain = useAtomValue(chainAtom); - const [selectedAsset, setSelectedAsset] = useState(); + const [selectedAssetAddress, setSelectedAssetAddress] = useState
(); // TODO: remove hardcoding and display assets other than NAM const availableAmount = useAtomValue(accountBalanceAtom).data; - const availableAssets = [namadaAsset]; + const availableAssets: AddressWithAssetAndAmountMap = + availableAmount ? + { + [namadaAsset.address]: { + asset: namadaAsset, + originalAddress: namadaAsset.address, + amount: availableAmount, + }, + } + : {}; const GAS_PRICE = BigNumber(0.000001); // 0.000001 NAM const GAS_LIMIT = BigNumber(1_000_000); const transactionFee = { - token: namadaAsset, + originalAddress: namadaAsset.address, + asset: namadaAsset, amount: GAS_PRICE.multipliedBy(GAS_LIMIT), }; @@ -115,8 +126,8 @@ export const IbcWithdraw: React.FC = () => { isShielded: false, availableAssets, availableAmount, - selectedAsset, - onChangeSelectedAsset: setSelectedAsset, + selectedAssetAddress, + onChangeSelectedAsset: setSelectedAssetAddress, }} destination={{ wallet: wallets.keplr, diff --git a/apps/namadillo/src/App/Ibc/ShieldAllAssetList.tsx b/apps/namadillo/src/App/Ibc/ShieldAllAssetList.tsx index 19944804e..cf7fa4b67 100644 --- a/apps/namadillo/src/App/Ibc/ShieldAllAssetList.tsx +++ b/apps/namadillo/src/App/Ibc/ShieldAllAssetList.tsx @@ -4,15 +4,14 @@ import { TokenCurrency } from "App/Common/TokenCurrency"; import BigNumber from "bignumber.js"; import clsx from "clsx"; import { getAssetImageUrl } from "integrations/utils"; -import { AddressWithAssetAndBalance } from "types"; +import { AddressWithAssetAndAmount } from "types"; -export type SelectableAddressWithAssetAndBalance = - AddressWithAssetAndBalance & { - checked: boolean; - }; +export type SelectableAddressWithAssetAndAmount = AddressWithAssetAndAmount & { + checked: boolean; +}; type ShieldAllAssetListProps = { - assets: SelectableAddressWithAssetAndBalance[]; + assets: SelectableAddressWithAssetAndAmount[]; onToggleAsset: (asset: Asset) => void; }; @@ -24,7 +23,7 @@ export const ShieldAllAssetList = ({
    {assets.map( ( - assetWithBalance: SelectableAddressWithAssetAndBalance, + assetWithBalance: SelectableAddressWithAssetAndAmount, idx: number ) => { const image = getAssetImageUrl(assetWithBalance.asset); @@ -55,7 +54,7 @@ export const ShieldAllAssetList = ({ diff --git a/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx b/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx index 81f98a017..5a1d9e897 100644 --- a/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx +++ b/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx @@ -11,12 +11,12 @@ import { TransferTransactionFee } from "App/Transfer/TransferTransactionFee"; import { getTransactionFee } from "integrations/utils"; import { useEffect, useMemo, useState } from "react"; import { - AddressWithAssetAndBalance, + AddressWithAssetAndAmount, ChainRegistryEntry, WalletProvider, } from "types"; import { - SelectableAddressWithAssetAndBalance, + SelectableAddressWithAssetAndAmount, ShieldAllAssetList, } from "./ShieldAllAssetList"; import { ShieldAllContainer } from "./ShieldAllContainer"; @@ -26,7 +26,7 @@ type ShieldAllPanelProps = { wallet: WalletProvider; walletAddress: string; isLoading: boolean; - assetList: AddressWithAssetAndBalance[]; + assetList: AddressWithAssetAndAmount[]; onShieldAll: (assets: Asset[]) => void; }; @@ -39,7 +39,7 @@ export const ShieldAllPanel = ({ onShieldAll, }: ShieldAllPanelProps): JSX.Element => { const [selectableAssets, setSelectableAssets] = useState< - SelectableAddressWithAssetAndBalance[] + SelectableAddressWithAssetAndAmount[] >([]); useEffect(() => { diff --git a/apps/namadillo/src/App/Transfer/SelectAssetModal.tsx b/apps/namadillo/src/App/Transfer/SelectAssetModal.tsx index 7d7070db7..e8dfe5aab 100644 --- a/apps/namadillo/src/App/Transfer/SelectAssetModal.tsx +++ b/apps/namadillo/src/App/Transfer/SelectAssetModal.tsx @@ -1,18 +1,17 @@ -import { Asset } from "@chain-registry/types"; import { Stack } from "@namada/components"; import { Search } from "App/Common/Search"; import { SelectModal } from "App/Common/SelectModal"; import clsx from "clsx"; import { useMemo, useState } from "react"; import { twMerge } from "tailwind-merge"; -import { WalletProvider } from "types"; +import { Address, AddressWithAsset, WalletProvider } from "types"; import { AssetCard } from "./AssetCard"; import { ConnectedWalletInfo } from "./ConnectedWalletInfo"; type SelectWalletModalProps = { onClose: () => void; - onSelect: (asset: Asset) => void; - assets: Asset[]; + onSelect: (address: Address) => void; + assets: AddressWithAsset[]; wallet: WalletProvider; walletAddress: string; }; @@ -28,7 +27,7 @@ export const SelectAssetModal = ({ const filteredAssets = useMemo(() => { return assets.filter( - (asset) => + ({ asset }) => asset.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 || asset.symbol.toLowerCase().indexOf(filter.toLowerCase()) >= 0 ); @@ -45,11 +44,11 @@ export const SelectAssetModal = ({ gap={0} className="max-h-[400px] overflow-auto dark-scrollbar pb-4 mr-[-0.5rem]" > - {filteredAssets.map((asset: Asset, index: number) => ( -
  • + {filteredAssets.map(({ asset, originalAddress }) => ( +