up wagmi viem rainbowkit

[technophile-04]

Description

We actually just updated wagmi, viem and rainbowkit last week in #849

But in latest version rainbowkit now allows users to set smartWallet preferece for coinbase, checkout out here

Also in new wagmi version they have update coibasewalletsdk version.

Having this both updated will also help people use latest version coinabsewalletsdk , especially to those who are participating in base hackathon

[technophile-04]

To test, just copy paste this in app/page.tsx :

Demo page.tsx :

```ts "use client"; import { ReactNode, useState } from "react"; import type { NextPage } from "next"; import { formatEther, parseEther } from "viem"; import { useAccount, useWalletClient } from "wagmi"; import { Address, AddressInput, Balance, EtherInput, InputBase } from "~~/components/scaffold-eth"; import { useScaffoldContract, useScaffoldEventHistory, useScaffoldReadContract, useScaffoldWriteContract, useTransactor, } from "~~/hooks/scaffold-eth"; const ExampleWrapper = ({ children }: { children: ReactNode }) => { return

{children}

; }; const Home: NextPage = () => { const { address: connectedAddress } = useAccount(); // ------ State ------ const [newGreeting, setNewGreeting] = useState(""); const [greetingValue, setNewGreetingValue] = useState(""); const [counterAddress, setCounterAddress] = useState(""); // --------------------- SE-2 Custom Hook ------------------- const transactorWrite = useTransactor(); // ---- WRITE METHODS ---- // TEST: Autocompleteion for contractName const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("YourContract"); const { data: walletClient } = useWalletClient(); const { data: YourContract } = useScaffoldContract({ // TEST: Autocompleteion for contractName contractName: "YourContract", // TEST: If you remove walletClient, this it should give TS error at line 115 that `write` is not defined property walletClient, }); // --- READ METHODS --- const { data: userGreetingCounter, refetch } = useScaffoldReadContract({ // TEST: Autocompleteion for contractName and functionName contractName: "YourContract", functionName: "userGreetingCounter", args: [counterAddress], query: { enabled: false, }, }); const { data: greetingsChangeLogs } = useScaffoldEventHistory({ contractName: "YourContract", eventName: "GreetingChange", watch: true, fromBlock: 0n, }); return ( <>

Welcome to Scaffold-ETH 2

Connected Address:

Balance:

{ try { await transactorWrite({ to: "0x55b9CB0bCf56057010b9c471e7D42d60e1111EEa", value: parseEther("5"), }); } catch (error) {} }} > Send 5 ETH

{/*--------- Write Demo -------------- */} {/*Demo with useScaffoldContractWrite Input + Value*/}

UseScaffoldContractWrite Example

setNewGreeting(value)} /> setNewGreetingValue(value)} /> { try { await writeYourContractAsync({ // TEST: TS autocompletion and types for functioName, args and value functionName: "setGreeting", args: [newGreeting], value: greetingValue ? parseEther(greetingValue) : undefined, }); } catch (error) { console.error("Error setting greeting", error); } }} > Set Greeting {/*Demo with bare useScaffolContract */}

useScaffoldContract Example

setNewGreeting(value)} /> setNewGreetingValue(value)} /> { try { if (!YourContract) throw new Error("YourContract not loaded"); await transactorWrite(() => YourContract.write.setGreeting([newGreeting], { value: greetingValue ? parseEther(greetingValue) : undefined, }), ); } catch (error) { console.error("Error setting greeting", error); } }} > Set Greeting {/*--------- Read Demo -------------- */}

useScaffoldContractRead Example

Counter: {userGreetingCounter?.toString()}

refetch()}> Read

useScaffoldEventHistory Example

{/* head */} {greetingsChangeLogs?.map((log, index) => ( ))}

	Address	Greetings	Premium
{index + 1}		{log.args.newGreeting}	{log.args.value ? formatEther(log.args.value) : "0"} ETH

); }; export default Home; ```