;
- }, [selectedEvmChain]);
// the ibc currency selection is controlled by the sender's chosen evm currency,
// and should be updated when an ibc currency or ibc chain is selected
@@ -338,6 +314,11 @@ export default function WithdrawCard(): React.ReactElement {
Balance:
)}
+ {withdrawFeeDisplay && (
+
+ Withdrawal fee: {withdrawFeeDisplay}
+
+ )}
)}
diff --git a/web/src/config/chainConfigs/types.ts b/web/src/config/chainConfigs/types.ts
index 1da78f4..842663a 100644
--- a/web/src/config/chainConfigs/types.ts
+++ b/web/src/config/chainConfigs/types.ts
@@ -1,5 +1,4 @@
import type { ChainInfo } from "@keplr-wallet/types";
-import { ethers } from "ethers";
/**
* Represents information about an IBC chain.
diff --git a/web/src/config/contexts/ConfigContext.tsx b/web/src/config/contexts/ConfigContext.tsx
index 5be5ff1..f03ed66 100644
--- a/web/src/config/contexts/ConfigContext.tsx
+++ b/web/src/config/contexts/ConfigContext.tsx
@@ -1,11 +1,7 @@
import React from "react";
import type { AppConfig } from "config";
-import type {
- EvmChainInfo,
- EvmChains,
- IbcChains,
-} from "config/chainConfigs/types";
+import type { EvmChainInfo } from "config/chainConfigs/types";
import { getEnvChainConfigs } from "config/chainConfigs";
import { getEnvVariable } from "config/env";
diff --git a/web/src/features/EthWallet/hooks/useEvmChainSelection.tsx b/web/src/features/EthWallet/hooks/useEvmChainSelection.tsx
index 3093d7d..c649f09 100644
--- a/web/src/features/EthWallet/hooks/useEvmChainSelection.tsx
+++ b/web/src/features/EthWallet/hooks/useEvmChainSelection.tsx
@@ -5,6 +5,8 @@ import React, {
useRef,
useState,
} from "react";
+import { ethers } from "ethers";
+
import type { DropdownOption } from "components/Dropdown/Dropdown";
import {
type EvmChainInfo,
@@ -12,7 +14,7 @@ import {
type EvmCurrency,
evmCurrencyBelongsToChain,
} from "config";
-import { useNotifications, NotificationType } from "features/Notifications";
+import { NotificationType, useNotifications } from "features/Notifications";
import { useEthWallet } from "features/EthWallet/hooks/useEthWallet";
import EthWalletConnector from "features/EthWallet/components/EthWalletConnector/EthWalletConnector";
@@ -93,6 +95,18 @@ export function useEvmChainSelection(evmChains: EvmChains) {
evmAccountAddress,
]);
+ const selectedEvmChainNativeToken = useMemo(() => {
+ return selectedEvmChain?.currencies[0];
+ }, [selectedEvmChain]);
+
+ const withdrawFeeDisplay = useMemo(() => {
+ if (!selectedEvmChainNativeToken || !selectedEvmCurrency) {
+ return "";
+ }
+ const fee = ethers.formatUnits(selectedEvmCurrency.ibcWithdrawalFeeWei, 18);
+ return `${fee} ${selectedEvmChainNativeToken.coinDenom}`;
+ }, [selectedEvmChainNativeToken, selectedEvmCurrency]);
+
const evmChainsOptions = useMemo(() => {
return Object.entries(evmChains).map(
([chainLabel, chain]): DropdownOption => ({
@@ -103,6 +117,20 @@ export function useEvmChainSelection(evmChains: EvmChains) {
);
}, [evmChains]);
+ // selectedEvmChainOption allows us to ensure the label is set properly
+ // in the dropdown when connecting via an "additional option"s action,
+ // e.g. the "Connect Keplr Wallet" option in the dropdown
+ const selectedEvmChainOption = useMemo(() => {
+ if (!selectedEvmChain) {
+ return null;
+ }
+ return {
+ label: selectedEvmChain?.chainName || "",
+ value: selectedEvmChain,
+ leftIconClass: selectedEvmChain?.iconClass || "",
+ } as DropdownOption;
+ }, [selectedEvmChain]);
+
const selectEvmChain = useCallback((chain: EvmChainInfo | null) => {
setSelectedEvmChain(chain);
}, []);
@@ -112,7 +140,7 @@ export function useEvmChainSelection(evmChains: EvmChains) {
return [];
}
- // can only withdraw the currency if it has a withdraw contract address defined
+ // can only withdraw the currency if it has a withdrawer contract address defined
const withdrawableTokens = selectedEvmChain.currencies?.filter(
(currency) =>
currency.erc20ContractAddress ||
@@ -128,6 +156,10 @@ export function useEvmChainSelection(evmChains: EvmChains) {
);
}, [selectedEvmChain]);
+ const defaultEvmCurrencyOption = useMemo(() => {
+ return evmCurrencyOptions[0] || null;
+ }, [evmCurrencyOptions]);
+
const selectEvmCurrency = useCallback((currency: EvmCurrency) => {
setSelectedEvmCurrency(currency);
}, []);
@@ -191,7 +223,11 @@ export function useEvmChainSelection(evmChains: EvmChains) {
selectEvmCurrency,
selectedEvmChain,
+ selectedEvmChainNativeToken,
+ withdrawFeeDisplay,
selectedEvmCurrency,
+ defaultEvmCurrencyOption,
+ selectedEvmChainOption,
evmAccountAddress,
evmBalance,
diff --git a/web/src/features/KeplrWallet/hooks/useIbcChainSelection.tsx b/web/src/features/KeplrWallet/hooks/useIbcChainSelection.tsx
index d98bc49..aa490a9 100644
--- a/web/src/features/KeplrWallet/hooks/useIbcChainSelection.tsx
+++ b/web/src/features/KeplrWallet/hooks/useIbcChainSelection.tsx
@@ -115,6 +115,24 @@ export function useIbcChainSelection(ibcChains: IbcChains) {
);
}, [selectedIbcChain]);
+ const defaultIbcCurrencyOption = useMemo(() => {
+ return ibcCurrencyOptions[0] || null;
+ }, [ibcCurrencyOptions]);
+
+ // selectedIbcChainOption allows us to ensure the label is set properly
+ // in the dropdown when connecting via an "additional option"s action,
+ // e.g. the "Connect Keplr Wallet" option in the dropdown
+ const selectedIbcChainOption = useMemo(() => {
+ if (!selectedIbcChain) {
+ return null;
+ }
+ return {
+ label: selectedIbcChain?.chainName || "",
+ value: selectedIbcChain,
+ leftIconClass: selectedIbcChain?.iconClass || "",
+ } as DropdownOption;
+ }, [selectedIbcChain]);
+
const selectIbcCurrency = useCallback((currency: IbcCurrency) => {
setSelectedIbcCurrency(currency);
}, []);
@@ -192,6 +210,8 @@ export function useIbcChainSelection(ibcChains: IbcChains) {
selectedIbcChain,
selectedIbcCurrency,
+ defaultIbcCurrencyOption,
+ selectedIbcChainOption,
ibcAccountAddress,
ibcBalance,
diff --git a/web/src/styles/icons.scss b/web/src/styles/icons.scss
index 6210d22..3510531 100644
--- a/web/src/styles/icons.scss
+++ b/web/src/styles/icons.scss
@@ -48,7 +48,6 @@ i.i-flame {
}
i.i-noble {
- // this was downloaded from figma
background-image: url('https://avatars.githubusercontent.com/u/133800472?s=200&v=4');
background-repeat: no-repeat;
background-size: contain;