54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import { useFetchNativeCurrencyPrice } from "@scaffold-ui/hooks";
|
|
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
|
|
|
|
type TBalanceProps = {
|
|
value?: string;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Display (ETH & USD) value for the input value provided.
|
|
*/
|
|
export const ETHToPrice = ({ value, className = "" }: TBalanceProps) => {
|
|
const [isEthBalance, setIsEthBalance] = useState(true);
|
|
const { targetNetwork } = useTargetNetwork();
|
|
const { price } = useFetchNativeCurrencyPrice();
|
|
|
|
const onToggleBalance = useCallback(() => {
|
|
if (price > 0) {
|
|
setIsEthBalance(!isEthBalance);
|
|
}
|
|
}, [isEthBalance, price]);
|
|
|
|
if (!value) {
|
|
return (
|
|
<div className="animate-pulse flex space-x-4">
|
|
<div className="flex items-center space-y-6">
|
|
<div className="h-5 w-12 bg-slate-300 rounded"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<button
|
|
className={`btn btn-sm btn-ghost flex flex-col font-normal items-center hover:bg-transparent ${className}`}
|
|
onClick={onToggleBalance}
|
|
>
|
|
<div className="w-full flex items-center justify-center">
|
|
{isEthBalance ? (
|
|
<>
|
|
<span>{parseFloat(value).toFixed(4)}</span>
|
|
<span className="text-xs font-bold ml-1">{targetNetwork.nativeCurrency.symbol}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-xs font-bold mr-1">$</span>
|
|
<span>{(parseFloat(value) * price).toFixed(2)}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|