49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { useTheme } from "next-themes";
|
|
import { useAccount, useSwitchChain } from "wagmi";
|
|
import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
|
|
import { getNetworkColor } from "~~/hooks/scaffold-eth";
|
|
import { getTargetNetworks } from "~~/utils/scaffold-eth";
|
|
|
|
const allowedNetworks = getTargetNetworks();
|
|
|
|
type NetworkOptionsProps = {
|
|
hidden?: boolean;
|
|
};
|
|
|
|
export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
|
|
const { switchChain } = useSwitchChain();
|
|
const { chain } = useAccount();
|
|
const { resolvedTheme } = useTheme();
|
|
const isDarkMode = resolvedTheme === "dark";
|
|
|
|
return (
|
|
<>
|
|
{allowedNetworks
|
|
.filter(allowedNetwork => allowedNetwork.id !== chain?.id)
|
|
.map(allowedNetwork => (
|
|
<li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
|
|
<button
|
|
className="menu-item btn-sm rounded-xl! flex gap-3 py-3 whitespace-nowrap"
|
|
type="button"
|
|
onClick={() => {
|
|
switchChain?.({ chainId: allowedNetwork.id });
|
|
}}
|
|
>
|
|
<ArrowsRightLeftIcon className="h-6 w-4 ml-2 sm:ml-0" />
|
|
<span>
|
|
Switch to{" "}
|
|
<span
|
|
style={{
|
|
color: getNetworkColor(allowedNetwork, isDarkMode),
|
|
}}
|
|
>
|
|
{allowedNetwork.name}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</>
|
|
);
|
|
};
|