Merge pull request #44 from davisshaver/chore-update-rainbowkit-wagmi

⬆️ Update RainbowKit and WAGMI

Author: davisshaver

package.json

@@ -21,19 +21,19 @@
     "url": "https://github.com/davisshaver/wp-rainbow/issues"
   },
   "dependencies": {
-    "@rainbow-me/rainbowkit": "^0.1.0",
-    "@wordpress/block-editor": "^8.6.0",
-    "@wordpress/blocks": "^11.6.0",
-    "@wordpress/components": "^19.9.0",
-    "@wordpress/i18n": "^4.7.0",
+    "@rainbow-me/rainbowkit": "^0.2.4",
+    "@wordpress/block-editor": "^9.2.0",
+    "@wordpress/blocks": "^11.9.0",
+    "@wordpress/components": "^19.12.0",
+    "@wordpress/i18n": "^4.10.0",
     "classnames": "^2.3.1",
-    "ethers": "^5.6.4",
+    "ethers": "^5.6.8",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react-style-proptype": "^3.2.2",
     "siwe": "^1.1.6",
     "util": "^0.12.4",
-    "wagmi": "^0.3.2"
+    "wagmi": "^0.4.11"
   },
   "devDependencies": {
     "@wordpress/scripts": "^22.5.0",

src/connect.jsx

@@ -1,6 +1,13 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { __ } from '@wordpress/i18n';
-import { useAccount, useEnsName, useNetwork, useSignMessage } from 'wagmi';
+import {
+	useAccount,
+	useConnect,
+	useDisconnect,
+	useEnsName,
+	useNetwork,
+	useSignMessage,
+} from 'wagmi';
 import stylePropType from 'react-style-proptype';
 import { SiweMessage } from 'siwe';
 import PropTypes from 'prop-types';
@@ -56,6 +63,8 @@ export function WPRainbowConnect( {
 	const { data: ensName, isSuccess: isENSSuccess } = useEnsName( {
 		address: accountData?.address,
 	} );
+	const { activeConnector } = useConnect();
+	const { disconnectAsync } = useDisconnect();
 
 	const signIn = React.useCallback( async () => {
 		try {
@@ -67,7 +76,7 @@ export function WPRainbowConnect( {
 				setState( ( x ) => ( { ...x, address, loading: false } ) );
 				return;
 			}
-			if ( window.signingIn.length > 1 ) {
+			if ( window?.signingIn.length > 1 ) {
 				return;
 			}
 			setState( ( x ) => ( { ...x, error: undefined, loading: true } ) );
@@ -124,7 +133,12 @@ export function WPRainbowConnect( {
 
 	const [ triggeredLogin, setTriggeredLogin ] = React.useState( false );
 	React.useEffect( () => {
-		if ( accountData && isENSSuccess && ! triggeredLogin ) {
+		if (
+			activeConnector &&
+			accountData &&
+			isENSSuccess &&
+			! triggeredLogin
+		) {
 			window.signingIn = ! window.signingIn
 				? [ true ]
 				: [ true, ...window.signingIn ];
@@ -165,7 +179,7 @@ export function WPRainbowConnect( {
 								) }
 						</div>
 					);
-				} else if ( account ) {
+				} else if ( activeConnector && account ) {
 					let loginButtonText = __( 'Continue Log In with Ethereum' );
 					if ( state.address ) {
 						loginButtonText = `${ __( 'Logged In as ' ) } ${
@@ -204,7 +218,9 @@ export function WPRainbowConnect( {
 						// Make sure we don't have an active signing attempt.
 						setState( {} );
 						setTriggeredLogin( false );
-						openConnectModal();
+						// This is a little weird, but since RainbowKit autoconnects,
+						// we need to make sure we're disconnected before logging in.
+						disconnectAsync().then( openConnectModal );
 					};
 					button = (
 						<div

src/provider.jsx

@@ -1,10 +1,6 @@
-import {
-	apiProvider,
-	configureChains,
-	getDefaultWallets,
-	RainbowKitProvider,
-} from '@rainbow-me/rainbowkit';
-import { chain, createClient, WagmiProvider } from 'wagmi';
+import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { chain, createClient, configureChains, WagmiConfig } from 'wagmi';
+import { infuraProvider } from 'wagmi/providers/infura';
 import stylePropType from 'react-style-proptype';
 
 import PropTypes from 'prop-types';
@@ -14,7 +10,7 @@ const { INFURA_ID, LOGGED_IN, SITE_TITLE } = wpRainbowData;
 
 const { chains, provider } = configureChains(
 	[ chain.mainnet ],
-	[ apiProvider.infura( INFURA_ID ), apiProvider.fallback() ]
+	[ infuraProvider( { infuraId: INFURA_ID } ) ]
 );
 
 const { connectors } = getDefaultWallets( {
@@ -64,7 +60,7 @@ function WPRainbow( {
 	style,
 } ) {
 	return (
-		<WagmiProvider client={ wagmiClient }>
+		<WagmiConfig client={ wagmiClient }>
 			<RainbowKitProvider chains={ chains }>
 				<WPRainbowConnect
 					buttonClassName={ buttonClassName }
@@ -83,7 +79,7 @@ function WPRainbow( {
 					style={ style }
 				/>
 			</RainbowKitProvider>
-		</WagmiProvider>
+		</WagmiConfig>
 	);
 }