Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge stores into one, fix chain being different in store #164

Merged
merged 4 commits into from
Dec 3, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/nextjs/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import Link from "next/link";
import { hardhat } from "viem/chains";
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Faucet } from "~~/components/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";

/**
* Site footer
*/
export const Footer = () => {
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const isLocalNetwork = targetNetwork.id === hardhat.id;

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ type AddCustomChainModalProps = {

export const AddCustomChainModal = forwardRef<HTMLDialogElement, AddCustomChainModalProps>(
({ groupedOptionsState, setGroupedOptionsState, setSelectedOption, onChange }, ref) => {
const { addCustomChain } = useGlobalState(state => ({
const { addCustomChain, setTargetNetwork } = useGlobalState(state => ({
addCustomChain: state.addChain,
setTargetNetwork: state.setTargetNetwork,
}));

const handleSubmitCustomChain = (e: React.FormEvent<HTMLFormElement>) => {
Expand Down Expand Up @@ -51,6 +52,8 @@ export const AddCustomChainModal = forwardRef<HTMLDialogElement, AddCustomChainM
e.currentTarget.reset();

setSelectedOption(newOption);
setTargetNetwork(chain);
console.log("chain", chain);
technophile-04 marked this conversation as resolved.
Show resolved Hide resolved
onChange(newOption);

handleCloseModal();
Expand Down
11 changes: 10 additions & 1 deletion packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,21 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
const [groupedOptionsState, setGroupedOptionsState] = useState(initialGroupedOptions);
const [selectedOption, setSelectedOption] = useState<SingleValue<Options>>(initialGroupedOptions.mainnet.options[0]);

const { addCustomChain, removeChain, resetTargetNetwork } = useGlobalState(state => ({
const { addCustomChain, removeChain, resetTargetNetwork, setTargetNetwork, chains } = useGlobalState(state => ({
addCustomChain: state.addChain,
removeChain: state.removeChain,
resetTargetNetwork: () => state.setTargetNetwork(mainnet),
setTargetNetwork: state.setTargetNetwork,
chains: state.chains,
}));

useEffect(() => {
if (selectedOption) {
const chain = Object.values(chains).find(chain => chain.id === selectedOption.value);
setTargetNetwork(chain as Chain);
}
}, [selectedOption, setTargetNetwork, chains]);
technophile-04 marked this conversation as resolved.
Show resolved Hide resolved

const seeOtherChainsModalRef = useRef<HTMLDialogElement>(null);
const customChainModalRef = useRef<HTMLDialogElement>(null);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { formatEther } from "viem";
import { TransactionHash } from "~~/components/blockexplorer/TransactionHash";
import { Address } from "~~/components/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";
import { TransactionWithFunction } from "~~/utils/scaffold-eth";
import { TransactionsTableProps } from "~~/utils/scaffold-eth/";

export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsTableProps) => {
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);

return (
<div className="flex justify-center px-4 md:px-0">
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/scaffold-eth/Address.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { normalize } from "viem/ens";
import { useEnsAvatar, useEnsName } from "wagmi";
import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
import { BlockieAvatar } from "~~/components/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";
import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";

type AddressProps = {
Expand Down Expand Up @@ -34,7 +34,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
const [ensAvatar, setEnsAvatar] = useState<string | null>();
const [addressCopied, setAddressCopied] = useState(false);

const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);

const { data: fetchedEns } = useEnsName({
address: address,
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/scaffold-eth/Balance.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Address } from "viem";
import { useAccountBalance } from "~~/hooks/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";

type BalanceProps = {
address?: Address;
Expand All @@ -11,7 +11,7 @@ type BalanceProps = {
* Display (ETH & USD) balance of an ETH address.
*/
export const Balance = ({ address, className = "" }: BalanceProps) => {
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const { balance, price, isError, isLoading, onToggleBalance, isEthBalance } = useAccountBalance(address);

if (!address || isLoading || balance === null) {
Expand Down
10 changes: 5 additions & 5 deletions packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ import { ContractReadMethods } from "./ContractReadMethods";
import { ContractVariables } from "./ContractVariables";
import { ContractWriteMethods } from "./ContractWriteMethods";
import { AbiFunction } from "abitype";
import { Abi } from "viem";
import { Abi, Address as AddressType } from "viem";
import { useContractRead } from "wagmi";
import { MiniFooter } from "~~/components/MiniFooter";
import { Address, Balance, MethodSelector } from "~~/components/scaffold-eth";
import { useNetworkColor } from "~~/hooks/scaffold-eth";
import { useAbiNinjaState } from "~~/services/store/store";
import { useGlobalState } from "~~/services/store/store";
import { getTargetNetworks } from "~~/utils/scaffold-eth";

type ContractUIProps = {
className?: string;
initialContractData: { address: string; abi: Abi };
initialContractData: { address: AddressType; abi: Abi };
};

export interface AugmentedAbiFunction extends AbiFunction {
Expand Down Expand Up @@ -61,8 +61,8 @@ const mainNetworks = getTargetNetworks();
**/
export const ContractUI = ({ className = "", initialContractData }: ContractUIProps) => {
const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(value => !value, false);
const { implementationAddress, chainId } = useAbiNinjaState(state => ({
chainId: state.mainChainId,
const { implementationAddress, chainId } = useGlobalState(state => ({
chainId: state.targetNetwork.id,
implementationAddress: state.implementationAddress,
}));
const mainNetwork = mainNetworks.find(network => network.id === chainId);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useReadContract } from "wagmi";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
import { displayTxResult } from "~~/components/scaffold-eth";
import { useAnimationConfig } from "~~/hooks/scaffold-eth";
import { useAbiNinjaState } from "~~/services/store/store";
import { useGlobalState } from "~~/services/store/store";
import { getParsedError, notification } from "~~/utils/scaffold-eth";

type DisplayVariableProps = {
Expand All @@ -24,7 +24,7 @@ export const DisplayVariable = ({
abi,
inheritedFrom,
}: DisplayVariableProps) => {
const mainChainId = useAbiNinjaState(state => state.mainChainId);
const mainChainId = useGlobalState(state => state.targetNetwork.id);
const {
data: result,
isFetching,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
getParsedContractFunctionArgs,
transformAbiFunction,
} from "~~/components/scaffold-eth";
import { useAbiNinjaState } from "~~/services/store/store";
import { useGlobalState } from "~~/services/store/store";
import { getParsedError, notification } from "~~/utils/scaffold-eth";

type ReadOnlyFunctionFormProps = {
Expand All @@ -29,7 +29,7 @@ export const ReadOnlyFunctionForm = ({
inheritedFrom,
abi,
}: ReadOnlyFunctionFormProps) => {
const mainChainId = useAbiNinjaState(state => state.mainChainId);
const mainChainId = useGlobalState(state => state.targetNetwork.id);
const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
const [result, setResult] = useState<unknown>();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
transformAbiFunction,
} from "~~/components/scaffold-eth";
import { useTransactor } from "~~/hooks/scaffold-eth";
import { useAbiNinjaState } from "~~/services/store/store";
import { useGlobalState } from "~~/services/store/store";

type WriteOnlyFunctionFormProps = {
abi: Abi;
Expand All @@ -31,7 +31,7 @@ export const WriteOnlyFunctionForm = ({
contractAddress,
inheritedFrom,
}: WriteOnlyFunctionFormProps) => {
const mainChainId = useAbiNinjaState(state => state.mainChainId);
const mainChainId = useGlobalState(state => state.targetNetwork.id);
const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
const [txValue, setTxValue] = useState<string>("");
const { chain } = useAccount();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useTheme } from "next-themes";
import { useSwitchChain } from "wagmi";
import { ArrowsRightLeftIcon } from "@heroicons/react/24/solid";
import { getNetworkColor } from "~~/hooks/scaffold-eth";
import { useAbiNinjaState, useGlobalState } from "~~/services/store/store";
import { useGlobalState } from "~~/services/store/store";

type NetworkOptionsProps = {
hidden?: boolean;
Expand All @@ -12,8 +12,13 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
const { resolvedTheme } = useTheme();
const isDarkMode = resolvedTheme === "dark";
const { switchChain } = useSwitchChain();
const mainChainId = useAbiNinjaState(state => state.mainChainId);
const chains = useGlobalState(state => state.chains);
const {
chains,
targetNetwork: { id: mainChainId },
} = useGlobalState(state => ({
chains: state.chains,
targetNetwork: state.targetNetwork,
}));

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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,18 @@ import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { Address } from "viem";
import { useNetworkColor } from "~~/hooks/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useAbiNinjaState } from "~~/services/store/store";
import { useGlobalState } from "~~/services/store/store";
import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";

/**
* Custom Wagmi Connect Button (watch balance + custom design)
*/
export const RainbowKitCustomConnectButton = () => {
const mainChainId = useAbiNinjaState(state => state.mainChainId);
const { mainChainId, targetNetwork } = useGlobalState(state => ({
mainChainId: state.targetNetwork.id,
targetNetwork: state.targetNetwork,
}));
const networkColor = useNetworkColor();
const { targetNetwork } = useTargetNetwork();

return (
<ConnectButton.Custom>
Expand Down
1 change: 0 additions & 1 deletion packages/nextjs/hooks/scaffold-eth/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export * from "./useScaffoldEventHistory";
export * from "./useScaffoldReadContract";
export * from "./useScaffoldWatchContractEvent";
export * from "./useScaffoldWriteContract";
export * from "./useTargetNetwork";
export * from "./useTransactor";
export * from "./useWatchBalance";
export * from "./useNativeCurrencyPrice";
Expand Down
7 changes: 4 additions & 3 deletions packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useCallback, useEffect, useState } from "react";
import { useTargetNetwork } from "./useTargetNetwork";
import { useQueryClient } from "@tanstack/react-query";
import { Address } from "viem";
import { useBalance, useBlockNumber } from "wagmi";
Expand All @@ -8,8 +7,10 @@ import { useGlobalState } from "~~/services/store/store";
export function useAccountBalance(address?: Address) {
const [isEthBalance, setIsEthBalance] = useState(true);
const [balance, setBalance] = useState<number | null>(null);
const price = useGlobalState(state => state.nativeCurrencyPrice);
const { targetNetwork } = useTargetNetwork();
const { price, targetNetwork } = useGlobalState(state => ({
price: state.nativeCurrencyPrice,
targetNetwork: state.targetNetwork,
}));
const queryClient = useQueryClient();
const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id });

Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useBurnerWallet.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { useTargetNetwork } from "./useTargetNetwork";
import { useLocalStorage } from "usehooks-ts";
import { Chain, Hex, HttpTransport, PrivateKeyAccount, createWalletClient, http } from "viem";
import { WalletClient } from "viem";
import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
import { usePublicClient } from "wagmi";
import { useGlobalState } from "~~/services/store/store";

const burnerStorageKey = "scaffoldEth2.burnerWallet.sk";

Expand Down Expand Up @@ -61,7 +61,7 @@ type BurnerAccount = {
export const useBurnerWallet = (): BurnerAccount => {
const [burnerSk, setBurnerSk] = useLocalStorage<Hex>(burnerStorageKey, newDefaultPrivateKey);

const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const publicClient = usePublicClient({ chainId: targetNetwork.id });
const [walletClient, setWalletClient] = useState<WalletClient<HttpTransport, Chain, PrivateKeyAccount>>();
const [generatedPrivateKey, setGeneratedPrivateKey] = useState<Hex>("0x");
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useContractLogs.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useEffect, useState } from "react";
import { useTargetNetwork } from "./useTargetNetwork";
import { Address, Log } from "viem";
import { usePublicClient } from "wagmi";
import { useGlobalState } from "~~/services/store/store";

export const useContractLogs = (address: Address) => {
const [logs, setLogs] = useState<Log[]>([]);
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const client = usePublicClient({ chainId: targetNetwork.id });

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useTargetNetwork } from "./useTargetNetwork";
import { useIsMounted } from "usehooks-ts";
import { usePublicClient } from "wagmi";
import { useGlobalState } from "~~/services/store/store";
import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/scaffold-eth/contract";

/**
Expand All @@ -10,7 +10,7 @@ import { Contract, ContractCodeStatus, ContractName, contracts } from "~~/utils/
*/
export const useDeployedContractInfo = <TContractName extends ContractName>(contractName: TContractName) => {
const isMounted = useIsMounted();
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const deployedContract = contracts?.[targetNetwork.id]?.[contractName as ContractName] as Contract<TContractName>;
const [status, setStatus] = useState<ContractCodeStatus>(ContractCodeStatus.LOADING);
const publicClient = usePublicClient({ chainId: targetNetwork.id });
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useNativeCurrencyPrice.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useTargetNetwork } from "./useTargetNetwork";
import { useInterval } from "usehooks-ts";
import scaffoldConfig from "~~/scaffold.config";
import { useGlobalState } from "~~/services/store/store";
import { fetchPriceFromUniswap } from "~~/utils/scaffold-eth";

const enablePolling = false;
Expand All @@ -11,7 +11,7 @@ const enablePolling = false;
* @returns nativeCurrencyPrice: number
*/
export const useNativeCurrencyPrice = () => {
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const [nativeCurrencyPrice, setNativeCurrencyPrice] = useState(0);

// Get the price of ETH from Uniswap on mount
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useNetworkColor.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTargetNetwork } from "./useTargetNetwork";
import { useTheme } from "next-themes";
import { useGlobalState } from "~~/services/store/store";
import { ChainWithAttributes } from "~~/utils/scaffold-eth";

export const DEFAULT_NETWORK_COLOR: [string, string] = ["#666666", "#bbbbbb"];
Expand All @@ -15,7 +15,7 @@ export function getNetworkColor(network: ChainWithAttributes, isDarkMode: boolea
export const useNetworkColor = (network?: ChainWithAttributes) => {
const { resolvedTheme } = useTheme();
const isDarkMode = resolvedTheme === "dark";
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);

return getNetworkColor(network || targetNetwork, isDarkMode);
};
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useScaffoldContract.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { useTargetNetwork } from "./useTargetNetwork";
import { Account, Address, Chain, Client, Transport, getContract } from "viem";
import { usePublicClient } from "wagmi";
import { GetWalletClientReturnType } from "wagmi/actions";
import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
import { useGlobalState } from "~~/services/store/store";
import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";

/**
Expand All @@ -23,7 +23,7 @@ export const useScaffoldContract = <
walletClient?: TWalletClient | null;
}) => {
const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const publicClient = usePublicClient({ chainId: targetNetwork.id });

let contract = undefined;
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/hooks/scaffold-eth/useScaffoldEventHistory.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTargetNetwork } from "./useTargetNetwork";
import { Abi, AbiEvent, ExtractAbiEventNames } from "abitype";
import { useInterval } from "usehooks-ts";
import { Hash } from "viem";
import * as chains from "viem/chains";
import { usePublicClient } from "wagmi";
import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
import scaffoldConfig from "~~/scaffold.config";
import { useGlobalState } from "~~/services/store/store";
import { replacer } from "~~/utils/scaffold-eth/common";
import {
ContractAbi,
Expand Down Expand Up @@ -51,7 +51,7 @@ export const useScaffoldEventHistory = <
const [fromBlockUpdated, setFromBlockUpdated] = useState<bigint>(fromBlock);

const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
const { targetNetwork } = useTargetNetwork();
const targetNetwork = useGlobalState(state => state.targetNetwork);
const publicClient = usePublicClient({
chainId: targetNetwork.id,
});
Expand Down
Loading
Loading