Initial commit with 🏗️ create-eth @ 2.0.4

packages/nextjs/app/crowdfund/_components/EthToPrice.tsx

@@ -0,0 +1,53 @@
+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>
+  );
+};