pyth-crosschain/bridge_ui/src/components/Transfer/Redeem.tsx

30 lines
988 B
TypeScript

import { useSelector } from "react-redux";
import { useHandleRedeem } from "../../hooks/useHandleRedeem";
import useIsWalletReady from "../../hooks/useIsWalletReady";
import { selectTransferTargetChain } from "../../store/selectors";
import ButtonWithLoader from "../ButtonWithLoader";
import KeyAndBalance from "../KeyAndBalance";
import StepDescription from "../StepDescription";
function Redeem() {
const { handleClick, disabled, showLoader } = useHandleRedeem();
const targetChain = useSelector(selectTransferTargetChain);
const { isReady, statusMessage } = useIsWalletReady(targetChain);
return (
<>
<StepDescription>Receive the tokens on the target chain</StepDescription>
<KeyAndBalance chainId={targetChain} />
<ButtonWithLoader
disabled={!isReady || disabled}
onClick={handleClick}
showLoader={showLoader}
error={statusMessage}
>
Redeem
</ButtonWithLoader>
</>
);
}
export default Redeem;