Update wagmi, viem, and @tanstack/react-query (#31)

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: Build
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build
+    steps:
+      - name: git-checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        uses: ./.github/actions/install-dependencies
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+      - name: Build
+        run: pnpm build && pnpm build:react
+
+      - name: Test
+        run: pnpm test

.github/workflows/build.yml → .github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: build dapp
+name: Deploy Example
 
 on:
   push:
@@ -8,7 +8,7 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    name: Build and Push
+    name: Deploy Example
     steps:
       - name: git-checkout
         uses: actions/checkout@v4

examples/react-waas/README.md

@@ -1,30 +1 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## react-waas

examples/react-waas/package.json

@@ -12,11 +12,11 @@
   "dependencies": {
     "0xsequence": "^1.9.19",
     "@0xsequence/kit": "workspace:*",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.5.7",
-    "wagmi": "^2.5.7"
+    "viem": "^2.9.26",
+    "wagmi": "^2.5.20"
   },
   "devDependencies": {
     "@types/react": "^18.2.79",

examples/react-waas/src/App.tsx

@@ -13,7 +13,7 @@ import { sequence } from '0xsequence'
 import { formatUnits } from 'viem'
 import { useEffect, useState } from 'react'
 
-function App() {
+export const App = () => {
   const { setOpenConnectModal } = useOpenConnectModal()
   const { disconnect } = useDisconnect()
   const { data: walletClient } = useWalletClient()
@@ -88,7 +88,7 @@ function App() {
   // Sending txn
   const [lastTxnDataHash, setLastTxnDataHash] = useState<string | undefined>()
 
-  const { data: txnData, sendTransaction, isLoading } = useSendTransaction()
+  const { data: txnData, sendTransaction, isPending } = useSendTransaction()
   const runSendTransaction = async () => {
     if (!walletClient) {
       return
@@ -137,16 +137,16 @@ function App() {
 
             <div className="card">
               <p>Network: {networkForCurrentChainId?.name}</p>
-              <button onClick={() => switchNetwork()} disabled={isLoading}>
+              <button onClick={() => switchNetwork()} disabled={isPending}>
                 Switch network
               </button>
             </div>
             <div className="card">
-              <button onClick={() => runSendTransaction()} disabled={isLoading}>
+              <button onClick={() => runSendTransaction()} disabled={isPending}>
                 Send transaction
               </button>
 
-              {isLoading && <p>Transaction is pending...</p>}
+              {isPending && <p>Transaction is pending...</p>}
 
               {lastTxnDataHash && (
                 <div>
@@ -181,7 +181,7 @@ function App() {
             <div className="card">
               <p>Sign message</p>
               <p>Message: {messageToSign}</p>
-              <button onClick={signMessage} disabled={isLoading}>
+              <button onClick={signMessage} disabled={isPending}>
                 Sign message
               </button>
 
@@ -201,5 +201,3 @@ function App() {
     </div>
   )
 }
-
-export default App

examples/react-waas/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { App } from './App.tsx'
 import './index.css'
 
 import { WagmiProvider, createConfig, http } from 'wagmi'

examples/react/package.json

@@ -16,15 +16,15 @@
     "@0xsequence/kit-connectors": "workspace:*",
     "@0xsequence/kit-wallet": "workspace:*",
     "@0xsequence/network": "^1.9.19",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.32.0",
     "@vanilla-extract/css": "^1.14.2",
     "ethers": "^5.7.2",
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.4.5",
-    "viem": "^2.5.7",
-    "wagmi": "^2.5.7"
+    "viem": "^2.9.26",
+    "wagmi": "^2.5.20"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",

examples/react/src/App.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider } from '@0xsequence/design-system'
 import { KitProvider } from '@0xsequence/kit'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
-import Homepage from './components/Homepage'
+import { Homepage } from './components/Homepage'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { WagmiProvider } from 'wagmi'
 
@@ -11,7 +11,7 @@ import { kitConfig, wagmiConfig } from './config'
 
 const queryClient = new QueryClient()
 
-function App() {
+export const App = () => {
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
@@ -30,5 +30,3 @@ function App() {
     </WagmiProvider>
   )
 }
-
-export default App

examples/react/src/components/Homepage.tsx

@@ -40,16 +40,16 @@ import {
 import { allNetworks } from '@0xsequence/network'
 import { Footer } from './Footer'
 import { messageToSign } from '../constants'
-import { formatAddress, getCheckoutSettings } from '../utils'
-import abi from '../constants/nft-abi'
+import { delay, formatAddress, getCheckoutSettings } from '../utils'
+import { abi } from '../constants/nft-abi'
 import { ethers } from 'ethers'
 import { Alert, AlertProps } from './Alert'
 
 // append ?debug to url to enable debug mode
 const searchParams = new URLSearchParams(location.search)
 const isDebugMode = searchParams.has('debug')
 
-function Homepage() {
+export const Homepage = () => {
   const { theme, setTheme } = useTheme()
   const { setTheme: setKitTheme } = useKitTheme()
   const { address, connector, isConnected } = useAccount()
@@ -66,8 +66,8 @@ function Homepage() {
 
   const isMobile = useMediaQuery('isMobile')
 
-  const { data: txnData, sendTransaction, isLoading: isSendTxnLoading, error } = useSendTransaction()
-  const { data: txnData2, isLoading: isMintTxnLoading, writeContract } = useWriteContract()
+  const { data: txnData, sendTransaction, isPending: isPendingSendTxn, error } = useSendTransaction()
+  const { data: txnData2, isPending: isPendingMintTxn, writeContract } = useWriteContract()
 
   const [isSigningMessage, setIsSigningMessage] = React.useState(false)
   const [isMessageValid, setIsMessageValid] = React.useState<boolean | undefined>()
@@ -280,11 +280,11 @@ function Homepage() {
     title: string
     description: string
     disabled?: boolean
-    isLoading?: boolean
+    isPending?: boolean
     onClick: () => void
   }
 
-  const ClickableCard = ({ title, description, disabled, isLoading, onClick }: ClickableCardProps) => {
+  const ClickableCard = ({ title, description, disabled, isPending, onClick }: ClickableCardProps) => {
     return (
       <Card
         style={{ width: '332px' }}
@@ -300,7 +300,7 @@ function Homepage() {
             {description}
           </Text>
         </Box>
-        {isLoading && <Spinner marginTop="3" size="sm" color="text100" />}
+        {isPending && <Spinner marginTop="3" size="sm" color="text100" />}
       </Card>
     )
   }
@@ -364,7 +364,7 @@ function Homepage() {
               <ClickableCard
                 title="Send transaction"
                 description="Send a transaction with your wallet"
-                isLoading={isSendTxnLoading}
+                isPending={isPendingSendTxn}
                 onClick={runSendTransaction}
               />
 
@@ -385,7 +385,7 @@ function Homepage() {
                 title="Sign message"
                 description="Sign a message with your wallet"
                 onClick={signMessage}
-                isLoading={isSigningMessage}
+                isPending={isSigningMessage}
               />
               {isMessageValid && (
                 <Card style={{ width: '332px' }} color={'text100'} flexDirection={'column'} gap={'2'}>
@@ -404,7 +404,7 @@ function Homepage() {
               <ClickableCard
                 title="Mint an NFT"
                 description="Test minting an NFT to your wallet"
-                isLoading={isMintTxnLoading}
+                isPending={isPendingMintTxn}
                 onClick={runMintNFT}
               />
               {lastTxnDataHash2 && (txnData2?.chainId === chainId || txnData2) && (
@@ -583,9 +583,3 @@ function Homepage() {
     </Box>
   )
 }
-
-function delay(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}
-
-export default Homepage

examples/react/src/constants/nft-abi.ts

@@ -1,4 +1,4 @@
-const abi = [
+export const abi = [
   { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
   {
     inputs: [
@@ -192,5 +192,3 @@ const abi = [
     type: 'function'
   }
 ]
-
-export default abi

examples/react/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import App from './App'
+import { App } from './App'
 
 console.log('VERSION:', process.env.PACKAGE_VERSION)
 

examples/react/src/utils/helpers.ts

@@ -11,3 +11,7 @@ export const truncateAtMiddle = (text: string, truncateAt: number) => {
 export const formatAddress = (text: string) => {
   return `0x${truncateAtMiddle(text?.substring(2) || '', 8)}`
 }
+
+export const delay = (ms: number) => {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "pnpm dev && pnpm typecheck && preconstruct build",
     "watch": "preconstruct watch",
-    "clean": "rimraf ./node_modules",
+    "clean": "rimraf -g ./**/node_modules",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "pnpm build && changeset publish",
@@ -53,7 +53,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "typescript": "~5.4.5",
-    "wagmi": "^2.5.7"
+    "wagmi": "^2.5.20"
   },
   "resolutions": {},
   "workspaces": [

packages/checkout/package.json

@@ -19,7 +19,7 @@
     "@0xsequence/metadata": "^1.9.19",
     "@0xsequence/network": "^1.9.19",
     "@paperxyz/react-client-sdk": "^1.1.3",
-    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query": "^5.32.0",
     "react-copy-to-clipboard": "^5.1.0"
   },
   "peerDependencies": {
@@ -44,7 +44,7 @@
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "wagmi": "^2.5.7"
+    "wagmi": "^2.5.20"
   },
   "files": [
     "src",

packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx

@@ -18,20 +18,20 @@ interface OrderSummaryItem {
 
 export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainId }: OrderSummaryItem) => {
   const { chains } = useConfig()
-  const { data: tokenMetadata, isLoading: isTokenMetadataLoading } = useTokenMetadata({
+  const { data: tokenMetadata, isPending: isPendingTokenMetadata } = useTokenMetadata({
     chainId,
     contractAddress,
     tokenId
   })
 
-  const { data: contractInfo, isLoading: isContractInfoLoading } = useContractInfo({
+  const { data: contractInfo, isPending: isPendingContractInfo } = useContractInfo({
     chainID: String(chainId),
     contractAddress
   })
 
-  const isLoading = isTokenMetadataLoading || isContractInfoLoading
+  const isPending = isPendingTokenMetadata || isPendingContractInfo
 
-  if (isLoading) {
+  if (isPending) {
     return <OrderSummarySkeleton />
   }