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

Wagmi v2 migration #700

Merged
merged 77 commits into from
Apr 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
77 commits
Select commit Hold shift + click to select a range
acde2a3
up wagmi and viem version
technophile-04 Jan 23, 2024
dfb5b0e
lock viem & wagmi version
technophile-04 Jan 23, 2024
fa16edd
update provider wrapper with new wagmi updates
technophile-04 Jan 24, 2024
fd2f898
fix AddressType
technophile-04 Jan 24, 2024
15c7230
viem v2 migrationchanges
technophile-04 Jan 24, 2024
2195631
update wagmiConfig and wagmiConnectors files
technophile-04 Jan 24, 2024
07922d6
use rainbowkit beta and get yarn start working
technophile-04 Jan 24, 2024
02a4e87
remove useNetwork
technophile-04 Jan 26, 2024
b1d4e46
use useWatchContractEvent instead of useContractEvent
technophile-04 Jan 26, 2024
2fbdb80
make faucet work & fix useAccountBalance to watch
technophile-04 Jan 26, 2024
a4c00bd
useAccountBalance: handle when balance is 0n
technophile-04 Jan 26, 2024
2bacbdf
get writeOnlyFunction form working for hardhat
technophile-04 Jan 26, 2024
1eac18a
update ReadOnlyFucntionForm
technophile-04 Jan 27, 2024
a0528a6
fix TODO in ReadOnlyFunction form
technophile-04 Jan 28, 2024
e49d073
fix AddressInput component
technophile-04 Jan 28, 2024
9c3a72e
fix DisplayVariable
technophile-04 Jan 28, 2024
b9132a2
up rainbowkit to v2
technophile-04 Feb 12, 2024
c454a41
up wagmi and rainbow versions
technophile-04 Feb 17, 2024
b6f406a
fix chains not configured buggst
technophile-04 Feb 17, 2024
2285e38
cast to Chain in wagmiConfig for compersion
technophile-04 Feb 17, 2024
3beb59c
WIP: add very naive implmentation of burnerWallet
technophile-04 Feb 26, 2024
c6bc1f4
WIP: update useScaffoldReadContract hook
technophile-04 Feb 29, 2024
283e9c4
merge origin/main
technophile-04 Feb 29, 2024
e0d42b6
WIP: first iteration of useScaffoldWriteContract
technophile-04 Mar 4, 2024
96e4a7e
WIP: add options to writeContract
technophile-04 Mar 4, 2024
72ce669
Merge branch 'main' into wagmi-v2
technophile-04 Mar 5, 2024
ba3f00a
WIP: fix basic tx errors
technophile-04 Mar 7, 2024
64cebf7
WIP: fix getParsedError
technophile-04 Mar 7, 2024
daa719a
WIP: fix types for event subscriber
technophile-04 Mar 7, 2024
1ff666e
remove BurnerConnector and BurnerConnectorTypes
technophile-04 Mar 7, 2024
6c5dbed
fix useAutoConnect import
technophile-04 Mar 7, 2024
6c8bf8d
fix mrege conflicts
technophile-04 Mar 21, 2024
a2f2649
up rainbow, wagmi, viem
technophile-04 Mar 21, 2024
e249448
remove console logs from burner connector
technophile-04 Mar 22, 2024
f1bbd32
fix bug: add chainId to Debug page read
technophile-04 Mar 26, 2024
20dfe88
fix types useScaffoldContract
technophile-04 Mar 26, 2024
8dc30d4
fix todo in useDeployedContractInfo
technophile-04 Mar 26, 2024
b2e80b9
remove decodeTxData todo
technophile-04 Mar 26, 2024
e110557
fix useSCWrite hook value type & forgive for errors when deployments …
technophile-04 Mar 26, 2024
ed5c282
update useSCWrite comments
technophile-04 Mar 26, 2024
5532e61
remove useSCEvenHistory TODO
technophile-04 Mar 27, 2024
c722605
remove useAutoConnect hook
technophile-04 Mar 27, 2024
07e91f5
create util getAlchemyHttpUrl and remove TODOs corresponding to it
technophile-04 Mar 27, 2024
588e803
remove todo from wagmi connector
technophile-04 Mar 27, 2024
f8ad6b3
fix bug in fetchPriceFromUniswap due to cyclic dependencies
technophile-04 Mar 27, 2024
aff440d
remvoe todo from writeOnlyFunction form
technophile-04 Mar 27, 2024
7c2a0a2
add TODO about react-query making request when window out of focus
technophile-04 Mar 27, 2024
fcfdf9a
move enabledChains to wagmiConnectors and pass burnerConfig only when…
technophile-04 Mar 28, 2024
e9c0436
add safeWallet as connector rainbowkit
technophile-04 Mar 28, 2024
83b5b03
diable refetchOnWindowFocus
technophile-04 Mar 28, 2024
2288701
merge origin/main
technophile-04 Mar 28, 2024
991c908
rename hooks filename
technophile-04 Mar 28, 2024
23179fa
add abitype as devDependency and Register Address as string
technophile-04 Apr 1, 2024
81c995b
spread walletDetails params in createBurnerConnector func
technophile-04 Apr 1, 2024
634562c
remove todo from burnerWallet config
technophile-04 Apr 1, 2024
f23e8a1
remove useAccountBalance hook
technophile-04 Apr 1, 2024
2a12d85
remove @ethersproject/providers as dependency
technophile-04 Apr 1, 2024
4d45d30
allow blockConfirmation + blockConfirmations to useScafffoldWriteCont…
technophile-04 Apr 2, 2024
7674eae
use getAlchemyHttpUrl in fetchPriceFromUniwswap with realtive import
technophile-04 Apr 2, 2024
c8f5d34
remove walletAutConnect boolean from scaffold.config
technophile-04 Apr 3, 2024
de74362
fix spelling of TransactorFuncOptions
technophile-04 Apr 3, 2024
4a01b67
accept contractName in writeAsync func
technophile-04 Apr 4, 2024
acee186
create a wrapper around writeSync func too from useContractWrite
technophile-04 Apr 4, 2024
3726a79
remove contractName from useScaffoldWriteContract comments
technophile-04 Apr 4, 2024
542440f
Merge branch 'main' into wagmi-v2
technophile-04 Apr 4, 2024
23a320a
Merge branch 'main' into wagmi-v2
technophile-04 Apr 5, 2024
388bc9c
fix bug for useSRead: pass enabled option to query obj
technophile-04 Apr 5, 2024
4462752
add watch option to useSRC
technophile-04 Apr 5, 2024
c42a9e3
fix bug: watch useEffect remove obj from dependencies
technophile-04 Apr 5, 2024
c9c8bea
pass chainId to publicClient (allows reading even when wallet is not …
technophile-04 Apr 5, 2024
c33edd4
update useSCEvenSubscriber comment and take in onLogs
technophile-04 Apr 6, 2024
3a8143b
rename useSEventSubscriber => useSWatchContractEvent
technophile-04 Apr 6, 2024
d9d88d8
Merge branch 'main' into wagmi-v2
technophile-04 Apr 8, 2024
44c0835
update useSWC to accept contractName while initialization instead
technophile-04 Apr 9, 2024
643d061
negate the condition for poollingInterval in config for hardhat
technophile-04 Apr 10, 2024
bcce414
merge origin/main
technophile-04 Apr 12, 2024
f29b4e2
Merge branch 'main' into wagmi-v2
technophile-04 Apr 14, 2024
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
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const SearchBar = () => {
event.preventDefault();
if (isHex(searchInput)) {
try {
const tx = await client.getTransaction({ hash: searchInput });
const tx = await client?.getTransaction({ hash: searchInput });
if (tx) {
router.push(`/blockexplorer/transaction/${searchInput}`);
return;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const TransactionPage: NextPage<PageProps> = ({ params }: PageProps) => {
const { targetNetwork } = useTargetNetwork();

useEffect(() => {
if (txHash) {
if (txHash && client) {
const fetchTransaction = async () => {
const tx = await client.getTransaction({ hash: txHash });
const receipt = await client.getTransactionReceipt({ hash: txHash });
Expand Down
22 changes: 17 additions & 5 deletions packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import { InheritanceTooltip } from "./InheritanceTooltip";
import { displayTxResult } from "./utilsDisplay";
import { Abi, AbiFunction } from "abitype";
import { Address } from "viem";
import { useContractRead } from "wagmi";
import { useReadContract } from "wagmi";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
import { useAnimationConfig } from "~~/hooks/scaffold-eth";
import { notification } from "~~/utils/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { getParsedError, notification } from "~~/utils/scaffold-eth";

type DisplayVariableProps = {
contractAddress: Address;
Expand All @@ -25,16 +26,20 @@ export const DisplayVariable = ({
abi,
inheritedFrom,
}: DisplayVariableProps) => {
const { targetNetwork } = useTargetNetwork();

const {
data: result,
isFetching,
refetch,
} = useContractRead({
error,
} = useReadContract({
address: contractAddress,
functionName: abiFunction.name,
abi: abi,
onError: error => {
notification.error(error.message);
chainId: targetNetwork.id,
query: {
retry: false,
},
});

Expand All @@ -44,6 +49,13 @@ export const DisplayVariable = ({
refetch();
}, [refetch, refreshDisplayVariables]);

useEffect(() => {
if (error) {
const parsedError = getParsedError(error);
notification.error(parsedError);
}
}, [error]);
technophile-04 marked this conversation as resolved.
Show resolved Hide resolved

return (
<div className="space-y-1 pb-2">
<div className="flex items-center">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";

import { useState } from "react";
import { useEffect, useState } from "react";
import { InheritanceTooltip } from "./InheritanceTooltip";
import { Abi, AbiFunction } from "abitype";
import { Address } from "viem";
import { useContractRead } from "wagmi";
import { useReadContract } from "wagmi";
import {
ContractInput,
displayTxResult,
Expand All @@ -13,6 +13,7 @@ import {
getParsedContractFunctionArgs,
transformAbiFunction,
} from "~~/app/debug/_components/contract";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { getParsedError, notification } from "~~/utils/scaffold-eth";

type ReadOnlyFunctionFormProps = {
Expand All @@ -30,19 +31,27 @@ export const ReadOnlyFunctionForm = ({
}: ReadOnlyFunctionFormProps) => {
const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
const [result, setResult] = useState<unknown>();
const { targetNetwork } = useTargetNetwork();

const { isFetching, refetch } = useContractRead({
const { isFetching, refetch, error } = useReadContract({
address: contractAddress,
functionName: abiFunction.name,
abi: abi,
args: getParsedContractFunctionArgs(form),
enabled: false,
onError: (error: any) => {
const parsedErrror = getParsedError(error);
notification.error(parsedErrror);
chainId: targetNetwork.id,
query: {
enabled: false,
retry: false,
},
});

useEffect(() => {
if (error) {
const parsedError = getParsedError(error);
notification.error(parsedError);
}
}, [error]);

const transformedFunction = transformAbiFunction(abiFunction);
const inputElements = transformedFunction.inputs.map((input, inputIndex) => {
const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import { InheritanceTooltip } from "./InheritanceTooltip";
import { Abi, AbiFunction } from "abitype";
import { Address, TransactionReceipt } from "viem";
import { useContractWrite, useNetwork, useWaitForTransaction } from "wagmi";
import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
import {
ContractInput,
TxReceipt,
Expand Down Expand Up @@ -34,26 +34,24 @@ export const WriteOnlyFunctionForm = ({
}: WriteOnlyFunctionFormProps) => {
const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
const [txValue, setTxValue] = useState<string | bigint>("");
const { chain } = useNetwork();
const { chain } = useAccount();
const writeTxn = useTransactor();
const { targetNetwork } = useTargetNetwork();
const writeDisabled = !chain || chain?.id !== targetNetwork.id;

const {
data: result,
isLoading,
writeAsync,
} = useContractWrite({
address: contractAddress,
functionName: abiFunction.name,
abi: abi,
args: getParsedContractFunctionArgs(form),
});
const { data: result, isPending, writeContractAsync } = useWriteContract();

const handleWrite = async () => {
if (writeAsync) {
if (writeContractAsync) {
try {
const makeWriteWithParams = () => writeAsync({ value: BigInt(txValue) });
const makeWriteWithParams = () =>
writeContractAsync({
address: contractAddress,
functionName: abiFunction.name,
abi: abi,
args: getParsedContractFunctionArgs(form),
value: BigInt(txValue),
});
await writeTxn(makeWriteWithParams);
onChange();
} catch (e: any) {
Expand All @@ -63,8 +61,8 @@ export const WriteOnlyFunctionForm = ({
};

const [displayedTxResult, setDisplayedTxResult] = useState<TransactionReceipt>();
const { data: txResult } = useWaitForTransaction({
hash: result?.hash,
const { data: txResult } = useWaitForTransactionReceipt({
hash: result,
});
useEffect(() => {
setDisplayedTxResult(txResult);
Expand Down Expand Up @@ -126,8 +124,8 @@ export const WriteOnlyFunctionForm = ({
}`}
data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`}
>
<button className="btn btn-secondary btn-sm" disabled={writeDisabled || isLoading} onClick={handleWrite}>
{isLoading && <span className="loading loading-spinner loading-xs"></span>}
<button className="btn btn-secondary btn-sm" disabled={writeDisabled || isPending} onClick={handleWrite}>
{isPending && <span className="loading loading-spinner loading-xs"></span>}
Send 💸
</button>
</div>
Expand Down
33 changes: 21 additions & 12 deletions packages/nextjs/components/ScaffoldEthAppWithProviders.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

import { useEffect, useState } from "react";
import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useTheme } from "next-themes";
import { Toaster } from "react-hot-toast";
import { WagmiConfig } from "wagmi";
import { WagmiProvider } from "wagmi";
import { Footer } from "~~/components/Footer";
import { Header } from "~~/components/Header";
import { BlockieAvatar } from "~~/components/scaffold-eth";
import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
import { useGlobalState } from "~~/services/store/store";
import { wagmiConfig } from "~~/services/web3/wagmiConfig";
import { appChains } from "~~/services/web3/wagmiConnectors";

const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
const price = useNativeCurrencyPrice();
Expand All @@ -36,6 +36,14 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
);
};

export const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
});

export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
const { resolvedTheme } = useTheme();
const isDarkMode = resolvedTheme === "dark";
Expand All @@ -46,15 +54,16 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
}, []);

return (
<WagmiConfig config={wagmiConfig}>
<ProgressBar />
<RainbowKitProvider
chains={appChains.chains}
avatar={BlockieAvatar}
theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
>
<ScaffoldEthApp>{children}</ScaffoldEthApp>
</RainbowKitProvider>
</WagmiConfig>
<WagmiProvider config={wagmiConfig}>
<QueryClientProvider client={queryClient}>
<ProgressBar />
<RainbowKitProvider
avatar={BlockieAvatar}
theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
>
<ScaffoldEthApp>{children}</ScaffoldEthApp>
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
};
13 changes: 9 additions & 4 deletions packages/nextjs/components/scaffold-eth/Address.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Link from "next/link";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { Address as AddressType, getAddress, isAddress } from "viem";
import { hardhat } from "viem/chains";
import { normalize } from "viem/ens";
import { useEnsAvatar, useEnsName } from "wagmi";
import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
import { BlockieAvatar } from "~~/components/scaffold-eth";
Expand Down Expand Up @@ -41,14 +42,18 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:

const { data: fetchedEns } = useEnsName({
address: checkSumAddress,
enabled: isAddress(checkSumAddress ?? ""),
chainId: 1,
query: {
enabled: isAddress(checkSumAddress ?? ""),
},
});
const { data: fetchedEnsAvatar } = useEnsAvatar({
name: fetchedEns,
enabled: Boolean(fetchedEns),
name: fetchedEns ? normalize(fetchedEns) : undefined,
chainId: 1,
cacheTime: 30_000,
query: {
enabled: Boolean(fetchedEns),
gcTime: 30_000,
},
});

// We need to apply this pattern to avoid Hydration errors.
Expand Down
18 changes: 13 additions & 5 deletions packages/nextjs/components/scaffold-eth/Balance.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
"use client";

import { useState } from "react";
import { Address } from "viem";
import { useBalance } from "wagmi";
import { useEffect, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { Address, formatEther } from "viem";
import { useBalance, useBlockNumber } from "wagmi";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";

Expand All @@ -18,14 +19,16 @@ type BalanceProps = {
export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
const { targetNetwork } = useTargetNetwork();

const queryClient = useQueryClient();
const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id });
const price = useGlobalState(state => state.nativeCurrencyPrice);
const {
data: balance,
isError,
isLoading,
queryKey,
} = useBalance({
address,
watch: true,
});

const [displayUsdMode, setDisplayUsdMode] = useState(price > 0 ? Boolean(usdMode) : false);
Expand All @@ -36,6 +39,11 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
}
};

useEffect(() => {
queryClient.invalidateQueries({ queryKey });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [blockNumber]);

if (!address || isLoading || balance === null) {
return (
<div className="animate-pulse flex space-x-4">
Expand All @@ -55,7 +63,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
);
}

const formattedBalance = balance ? Number(balance.formatted) : 0;
const formattedBalance = balance ? Number(formatEther(balance.value)) : 0;

return (
<button
Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/components/scaffold-eth/Faucet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useEffect, useState } from "react";
import { Address as AddressType, createWalletClient, http, parseEther } from "viem";
import { hardhat } from "viem/chains";
import { useNetwork } from "wagmi";
import { useAccount } from "wagmi";
import { BanknotesIcon } from "@heroicons/react/24/outline";
import { Address, AddressInput, Balance, EtherInput } from "~~/components/scaffold-eth";
import { useTransactor } from "~~/hooks/scaffold-eth";
Expand All @@ -26,7 +26,7 @@ export const Faucet = () => {
const [faucetAddress, setFaucetAddress] = useState<AddressType>();
const [sendValue, setSendValue] = useState("");

const { chain: ConnectedChain } = useNetwork();
const { chain: ConnectedChain } = useAccount();

const faucetTxn = useTransactor(localWalletClient);

Expand Down
Loading
Loading