updates demo app to latest Next / Privy & library version

provides contract deployments on Base / Sepolia better recognition for still active user sessions Signed-off-by: stadolf <[email protected]>
moleculeprotocol · Apr 14, 2024 · 6189a69 · 6189a69
1 parent 6a3f055
commit 6189a69
Show file tree

Hide file tree

Showing 10 changed files with 1,959 additions and 1,343 deletions.
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "20"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
 
       - name: Setup Pages

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safetxdemo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "postinstall": "wagmi generate && .bin/prefix.sh '// @ts-nocheck' 'src/generated/*.ts'",
@@ -15,22 +15,22 @@
     "@chakra-ui/react": "^2.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@privy-io/react-auth": "^1.43.2",
-    "@moleculexyz/wagmi-safe-wait-for-tx": "0.2.0",
-    "@privy-io/wagmi-connector": "^0.1.4",
-    "@wagmi/chains": "^1.8.0",
+    "@moleculexyz/wagmi-safe-wait-for-tx": "1.0.0",
+    "@privy-io/react-auth": "^1.60.4",
+    "@privy-io/wagmi": "^0.2.3",
+    "@tanstack/react-query": "^5.29.2",
     "framer-motion": "^10.16.4",
-    "next": "13.5.4",
+    "next": "^14.2.0",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^1.15.4",
-    "wagmi": "^1.4.3"
+    "viem": "^2.9.16",
+    "wagmi": "^2.5.19"
   },
   "devDependencies": {
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@wagmi/cli": "^1.5.2",
+    "@wagmi/cli": "^2.1.4",
     "eslint": "^8",
     "eslint-config-next": "13.5.4",
     "typescript": "^5.0.4"

diff --git a/packages/demo/src/abis/Storage.json b/packages/demo/src/abis/Storage.json
@@ -25,35 +25,48 @@
     "type": "event"
   },
   {
-    "inputs": [
+    "inputs": [],
+    "name": "callMeToFail",
+    "outputs": [
       {
-        "internalType": "uint256",
-        "name": "num",
-        "type": "uint256"
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
       }
     ],
-    "name": "store",
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "retrieve",
     "outputs": [
       {
         "internalType": "uint256",
         "name": "",
         "type": "uint256"
       }
     ],
-    "stateMutability": "nonpayable",
+    "stateMutability": "view",
     "type": "function"
   },
   {
-    "inputs": [],
-    "name": "retrieve",
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "num",
+        "type": "uint256"
+      }
+    ],
+    "name": "store",
     "outputs": [
       {
         "internalType": "uint256",
         "name": "",
         "type": "uint256"
       }
     ],
-    "stateMutability": "view",
+    "stateMutability": "nonpayable",
     "type": "function"
   }
-]
+]
diff --git a/packages/demo/src/app/layout.tsx b/packages/demo/src/app/layout.tsx
@@ -20,12 +20,10 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <Providers>
-          <Container maxW="container.lg" minH="100vh" bg="gray.100">
-            <Flex w="full" align="center" justify="space-between">
+          <Container maxW="container.lg" minH="100vh">
+            <Flex w="full" align="center" justify="space-between" gap={2}>
               <Text fontWeight="bold">Safetest</Text>
-              <Flex>
-                <LoginButton />
-              </Flex>
+                <LoginButton />              
             </Flex>
             {children}
           </Container>

diff --git a/packages/demo/src/app/page.tsx b/packages/demo/src/app/page.tsx
@@ -2,9 +2,9 @@
 
 import { ActiveAddress } from "@/components/ActiveAddress";
 import {
-  storageABI,
-  useStorageRetrieve,
-  useStorageStore,
+  storageAbi,
+  useReadStorageRetrieve,
+  useWriteStorageStore
 } from "@/generated/wagmi";
 import { safeDecodeLogs } from "@/utils/safeDecodeLogs";
 import {
@@ -17,22 +17,19 @@ import {
 } from "@chakra-ui/react";
 import { useSafeWaitForTransaction } from "@moleculexyz/wagmi-safe-wait-for-tx";
 import { useCallback, useEffect, useState } from "react";
-import { useAccount, useNetwork } from "wagmi";
-import { WriteContractResult } from "wagmi/actions";
+import { WriteContractReturnType } from "viem";
+import { useAccount } from "wagmi";
 
 export default function Home() {
-  //const { ready, wallet: activeWallet, setActiveWallet } = usePrivyWagmi();
-  const { address } = useAccount();
-
-  const { chain } = useNetwork();
+  const { address, chainId } = useAccount();
 
   const toast = useToast();
-  const [newVal, setNewVal] = useState<number>();
+  const [newVal, setNewVal] = useState<number>(0);
   const [curVal, setCurVal] = useState<number>();
-  const [tx, setTx] = useState<WriteContractResult>();
+  const [tx, setTx] = useState<WriteContractReturnType>();
 
-  const { data, error, status } = useStorageRetrieve();
-  const { writeAsync } = useStorageStore();
+  const { data, error, status } = useReadStorageRetrieve();
+  const { writeContractAsync } = useWriteStorageStore();
   const { data: receipt, isError, isLoading } = useSafeWaitForTransaction(tx);
 
   useEffect(() => {
@@ -44,7 +41,7 @@ export default function Home() {
   useEffect(() => {
     if (!receipt) return;
 
-    const numberChangedEvent = safeDecodeLogs(receipt, storageABI).find(
+    const numberChangedEvent = safeDecodeLogs(receipt, storageAbi).find(
       (e) => e?.eventName == "NumberChanged"
     );
     if (!numberChangedEvent) {
@@ -62,14 +59,14 @@ export default function Home() {
   }, [receipt, toast]);
 
   const onSubmit = useCallback(async () => {
-    if (!address || !chain || newVal === undefined) return;
+    if (!address || !chainId || newVal === undefined) return;
 
     setTx(
-      await writeAsync({
+      await writeContractAsync({
         args: [BigInt(newVal || 0n)],
       })
     );
-  }, [address, chain, newVal, writeAsync]);
+  }, [address, chainId, newVal, writeContractAsync]);
 
   return (
     <main>
@@ -89,7 +86,7 @@ export default function Home() {
               name="newVal"
               type="number"
               value={newVal}
-              onChange={(v) => setNewVal(v.target.valueAsNumber)}
+              onChange={(v: any) => { v.preventDefault(); setNewVal(v.target.valueAsNumber) }}
             />
           </FormControl>
           <Button colorScheme="cyan" type="submit">
@@ -99,7 +96,7 @@ export default function Home() {
         {tx && (
           <Flex direction="column" my={6}>
             <Text>
-              Transaction: <b>{tx.hash}</b>
+              Transaction: <b>{tx}</b>
             </Text>
             {receipt && (
               <Text>

diff --git a/packages/demo/src/chainConfig.ts b/packages/demo/src/chainConfig.ts
@@ -0,0 +1,19 @@
+import { createConfig } from "@privy-io/wagmi"
+import { http } from "viem"
+import { baseSepolia, sepolia } from "viem/chains"
+
+export const configureChainsConfig = createConfig({
+  chains: [baseSepolia,sepolia],
+  ssr: true, 
+  transports: {
+    [sepolia.id]: http(),
+    [baseSepolia.id]: http()
+
+  }
+})
+
+declare module 'wagmi' { 
+  interface Register { 
+    config: typeof configureChainsConfig 
+  } 
+} 
diff --git a/packages/demo/src/components/LoginButton.tsx b/packages/demo/src/components/LoginButton.tsx
@@ -2,58 +2,69 @@
 import { Button, Flex, Text, VStack } from "@chakra-ui/react";
 import { useIsContractWallet } from "@moleculexyz/wagmi-safe-wait-for-tx";
 import { usePrivy, useWallets } from "@privy-io/react-auth";
-import { usePrivyWagmi } from "@privy-io/wagmi-connector";
+import { useSetActiveWallet } from "@privy-io/wagmi";
 import { useCallback } from "react";
-import { Address, useDisconnect } from "wagmi";
+import { Address } from "viem";
+import { useAccount, useDisconnect } from "wagmi";
 
 export const LoginButton = () => {
-  const { wallet: activeWallet, ready, setActiveWallet } = usePrivyWagmi();
-  const { connectWallet, authenticated, logout, login } = usePrivy();
+  const {setActiveWallet} = useSetActiveWallet()
+
+  const {address, chain, chainId} = useAccount()
+    const { logout, login, user, connectWallet } = usePrivy();
   const isContractWallet = useIsContractWallet(
-    activeWallet?.address as Address | undefined
+    address as Address | undefined
   );
 
   const { disconnect } = useDisconnect();
 
-  const { wallets } = useWallets();
+  const { wallets, ready } = useWallets();
 
   const unlink = useCallback(() => {
     disconnect();
     try {
       logout();
-      if (activeWallet) activeWallet.disconnect();
     } catch (e: any) {
       console.warn("cant disconnect wallet");
     }
-  }, [activeWallet, disconnect, logout]);
+  }, [disconnect, logout]);
 
   if (wallets && wallets.length > 0) {
     return (
-      <Flex>
+      <Flex gap={2} align="center">
         <VStack>
           {wallets.map((wallet) => (
             <Flex key={wallet.address}>
-              {wallet.address === activeWallet?.address ? (
+              {wallet.address === address ? (
                 <Text onClick={() => setActiveWallet(wallet)}>
-                  {wallet.address} {isContractWallet ? "AA" : "EOA"}
+                  {wallet.address} {isContractWallet.isContract ? "AA" : "EOA"}
+                  {isContractWallet.isSafe && "SAFE"}
                 </Text>
               ) : (
-                <Button onClick={() => setActiveWallet(wallet)}>
+                <Button onClick={() => setActiveWallet(wallet)} size="sm">
                   Activate {wallet.address}
                 </Button>
               )}
             </Flex>
           ))}
+          <Flex>Chain: {chainId} {chain?.name}</Flex>
         </VStack>
         <Button onClick={unlink}>Logout</Button>
       </Flex>
     );
   }
 
+  if (user) {
+    return <Button onClick={() => logout()} colorScheme="yellow">
+      Log out
+    </Button>
+  }
   //use "login" for the full privy flow
   return (
+    <>
     <Button onClick={() => login()} colorScheme="orange">
       Login
     </Button>
+    </>
   );
 };