From 893cbffdaf390e1dfe726f6b4fca9de4cb72f8e1 Mon Sep 17 00:00:00 2001 From: Corban Brook Date: Wed, 24 Apr 2024 14:39:20 -0400 Subject: [PATCH] Update wagmi, viem, and @tanstack/react-query (#31) --- .github/workflows/ci.yml | 23 + .github/workflows/{build.yml => deploy.yml} | 4 +- examples/react-waas/README.md | 31 +- examples/react-waas/package.json | 6 +- examples/react-waas/src/App.tsx | 14 +- examples/react-waas/src/main.tsx | 2 +- examples/react/package.json | 6 +- examples/react/src/App.tsx | 6 +- examples/react/src/components/Homepage.tsx | 28 +- examples/react/src/constants/nft-abi.ts | 4 +- examples/react/src/index.tsx | 2 +- examples/react/src/utils/helpers.ts | 4 + package.json | 4 +- packages/checkout/package.json | 4 +- .../component/OrderSummaryItem.tsx | 8 +- .../src/views/CheckoutSelection/index.tsx | 14 +- packages/kit/package.json | 4 +- .../kit/src/components/TxnDetails/index.tsx | 4 +- packages/wallet/package.json | 4 +- packages/wallet/src/hooks/data.ts | 28 +- .../TransactionHistoryItem.tsx | 8 +- .../shared/TransactionHistoryList/index.tsx | 6 +- .../wallet/src/views/CoinDetails/index.tsx | 14 +- .../src/views/CollectibleDetails/index.tsx | 14 +- .../src/views/CollectionDetails/index.tsx | 4 +- packages/wallet/src/views/History.tsx | 4 +- .../AssetSummary/CoinTile/index.tsx | 10 +- .../Home/components/AssetSummary/index.tsx | 4 +- .../wallet/src/views/Search/SearchWallet.tsx | 12 +- .../src/views/Search/SearchWalletViewAll.tsx | 24 +- packages/wallet/src/views/SendCoin.tsx | 10 +- packages/wallet/src/views/SendCollectible.tsx | 6 +- .../src/views/TransactionDetails/index.tsx | 12 +- pnpm-lock.yaml | 3337 +++++++++-------- 34 files changed, 1826 insertions(+), 1839 deletions(-) create mode 100644 .github/workflows/ci.yml rename .github/workflows/{build.yml => deploy.yml} (92%) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..effd2d6c --- /dev/null +++ b/.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 diff --git a/.github/workflows/build.yml b/.github/workflows/deploy.yml similarity index 92% rename from .github/workflows/build.yml rename to .github/workflows/deploy.yml index 11f86798..0ca187c7 100644 --- a/.github/workflows/build.yml +++ b/.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 diff --git a/examples/react-waas/README.md b/examples/react-waas/README.md index 0d6babed..7825ed00 100644 --- a/examples/react-waas/README.md +++ b/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 diff --git a/examples/react-waas/package.json b/examples/react-waas/package.json index cf2a4be4..4462df38 100644 --- a/examples/react-waas/package.json +++ b/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", diff --git a/examples/react-waas/src/App.tsx b/examples/react-waas/src/App.tsx index a0e5e02b..753398d0 100644 --- a/examples/react-waas/src/App.tsx +++ b/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() - const { data: txnData, sendTransaction, isLoading } = useSendTransaction() + const { data: txnData, sendTransaction, isPending } = useSendTransaction() const runSendTransaction = async () => { if (!walletClient) { return @@ -137,16 +137,16 @@ function App() {

Network: {networkForCurrentChainId?.name}

-
- - {isLoading &&

Transaction is pending...

} + {isPending &&

Transaction is pending...

} {lastTxnDataHash && (
@@ -181,7 +181,7 @@ function App() {

Sign message

Message: {messageToSign}

- @@ -201,5 +201,3 @@ function App() {
) } - -export default App diff --git a/examples/react-waas/src/main.tsx b/examples/react-waas/src/main.tsx index 9c082e37..6f698034 100644 --- a/examples/react-waas/src/main.tsx +++ b/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' diff --git a/examples/react/package.json b/examples/react/package.json index be33ba68..cf2e40c4 100644 --- a/examples/react/package.json +++ b/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", diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 92f2c92d..1a0d8d51 100644 --- a/examples/react/src/App.tsx +++ b/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 ( @@ -30,5 +30,3 @@ function App() { ) } - -export default App diff --git a/examples/react/src/components/Homepage.tsx b/examples/react/src/components/Homepage.tsx index bfda9003..5cdb2043 100644 --- a/examples/react/src/components/Homepage.tsx +++ b/examples/react/src/components/Homepage.tsx @@ -40,8 +40,8 @@ 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' @@ -49,7 +49,7 @@ import { Alert, AlertProps } from './Alert' 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() @@ -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 ( - {isLoading && } + {isPending && } ) } @@ -364,7 +364,7 @@ function Homepage() { @@ -385,7 +385,7 @@ function Homepage() { title="Sign message" description="Sign a message with your wallet" onClick={signMessage} - isLoading={isSigningMessage} + isPending={isSigningMessage} /> {isMessageValid && ( @@ -404,7 +404,7 @@ function Homepage() { {lastTxnDataHash2 && (txnData2?.chainId === chainId || txnData2) && ( @@ -583,9 +583,3 @@ function Homepage() { ) } - -function delay(ms: number) { - return new Promise(resolve => setTimeout(resolve, ms)) -} - -export default Homepage diff --git a/examples/react/src/constants/nft-abi.ts b/examples/react/src/constants/nft-abi.ts index c6670e61..9ba97ac3 100644 --- a/examples/react/src/constants/nft-abi.ts +++ b/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 diff --git a/examples/react/src/index.tsx b/examples/react/src/index.tsx index d119444b..6beb2082 100644 --- a/examples/react/src/index.tsx +++ b/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) diff --git a/examples/react/src/utils/helpers.ts b/examples/react/src/utils/helpers.ts index 596ae41e..fda8355a 100644 --- a/examples/react/src/utils/helpers.ts +++ b/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)) +} diff --git a/package.json b/package.json index 35cb5f86..0d8b94c5 100644 --- a/package.json +++ b/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": [ diff --git a/packages/checkout/package.json b/packages/checkout/package.json index 154f039a..44924926 100644 --- a/packages/checkout/package.json +++ b/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", diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx index ab78a095..e8755c7c 100644 --- a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx +++ b/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 } diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx index 198a3ee9..56681efb 100644 --- a/packages/checkout/src/views/CheckoutSelection/index.tsx +++ b/packages/checkout/src/views/CheckoutSelection/index.tsx @@ -26,17 +26,17 @@ export const CheckoutSelection = () => { const displayCryptoCheckout = !!cryptoCheckoutSettings // const displayCreditCardCheckout = !!creditCardCheckoutSettings - const { data: contractInfoData, isLoading: contractInfoLoading } = useContractInfo({ + const { data: contractInfoData, isPending: isPendingContractInfo } = useContractInfo({ contractAddress: cryptoCheckoutSettings?.coinQuantity?.contractAddress || '', chainID: String(cryptoCheckoutSettings?.chainId || 1) }) - const { data: balancesData, isLoading: balancesLoading } = useBalances({ + const { data: balancesData, isPending: isPendingBalances } = useBalances({ accountAddress: accountAddress || '', chainId: cryptoCheckoutSettings?.chainId || 1 }) - const isLoading = (contractInfoLoading || balancesLoading) && cryptoCheckoutSettings + const isPending = (isPendingContractInfo || isPendingBalances) && cryptoCheckoutSettings const isNativeToken = compareAddress(cryptoCheckoutSettings?.coinQuantity?.contractAddress || '', ethers.constants.AddressZero) const nativeTokenInfo = getNativeTokenInfoByChainId(cryptoCheckoutSettings?.chainId || 1, chains) @@ -106,7 +106,7 @@ export const CheckoutSelection = () => { Total - {isLoading ? ( + {isPending ? ( ) : ( @@ -135,7 +135,7 @@ export const CheckoutSelection = () => { onClick={onClickPayWithCard} /> )} */} - {displayCryptoCheckout && !isInsufficientBalance && !isLoading && ( + {displayCryptoCheckout && !isInsufficientBalance && !isPending && (