diff --git a/components/chain-list/chain-item.tsx b/components/chain-list/chain-item.tsx index 03547a9..f8680ed 100644 --- a/components/chain-list/chain-item.tsx +++ b/components/chain-list/chain-item.tsx @@ -16,7 +16,23 @@ interface Props { export const ChainItem: FunctionComponent = (props) => { const { chainItem, checkedItemHandler, checkedItems } = props; const disabled = "disabled" in chainItem && chainItem.disabled; - const [checked, setChecked] = useState(!!disabled); + // XXX: Currently, this component can't handle `checked` state well, + // If chain is disabled, it should be disabled in general. + // However, if it is disabled due to the limitation of ethermint and ledger, + // it should be not checked. + // To solve this problem, for now, just use dumb way. + // If chain is disabled with explicit reason, it should be unchecked. + const [checked, setChecked] = useState(!!disabled && !chainItem.reason); + + useEffect(() => { + if (disabled) { + if (chainItem.reason) { + setChecked(false); + } else { + setChecked(true); + } + } + }, [chainItem, disabled]); const checkHandler = () => { if (!disabled) { diff --git a/components/chain-list/chain-list.tsx b/components/chain-list/chain-list.tsx index 566c8f0..edf572b 100644 --- a/components/chain-list/chain-list.tsx +++ b/components/chain-list/chain-list.tsx @@ -30,7 +30,7 @@ export const ChainList: FunctionComponent = (props) => { {chainList.map((chainItem) => ( = (props) => { ))} {disabledChainList.map((chainItem) => (