Fix/localhost (#161)

BuidlGuidl · Sep 27, 2024 · b815566 · b815566
1 parent 1cf1f8d
commit b815566
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -15,33 +15,35 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
  const mainChainId = useAbiNinjaState(state => state.mainChainId);
  const chains = useGlobalState(state => state.chains);
 
+ const filteredChains = chains.filter(allowedNetwork => allowedNetwork.id === mainChainId);
+ // if chainId is 31337 we render one element, since viem chains have 3 chains with same chainId.
+ const networksToRender = mainChainId === 31337 ? [filteredChains[0]] : filteredChains;
+
  return (
  <>
- {chains
- .filter(allowedNetwork => allowedNetwork.id === mainChainId)
- .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>
+ {networksToRender.map(allowedNetwork => (
+ <li key={`${allowedNetwork.id}-${allowedNetwork.name}`} 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.id === 31337 ? "Localhost" : allowedNetwork.name}
  </span>
- </button>
- </li>
- ))}
+ </span>
+ </button>
+ </li>
+ ))}
  </>
  );
 };
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -81,7 +81,7 @@ const Home: NextPage = () => {
  setContractAbi(contractData.abi);
  }
 
- if (network === "31337") {
+ if (network === "31337" && isAddress(verifiedContractAddress)) {
  setActiveTab(TabName.addressAbi);
  setLocalAbiContractAddress(verifiedContractAddress);
  return;
@@ -243,6 +243,7 @@ const Home: NextPage = () => {
  <button
  className="btn btn-primary min-h-fit h-10 px-4 text-base font-semibold border-2 hover:bg-neutral hover:text-primary"
  onClick={() => fetchAbiFromHeimdall(localAbiContractAddress as Address)}
+ disabled={network === "31337"}
  >
  {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Decompile (beta)"}
  </button>