Merge pull request #53 from davisshaver/update-to-walletconnect-v2

davisshaver · web-flow · commit 869808afbef7 · 2023-06-16T11:51:57.000-04:00
💥 Update to WalletConnect v2
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,7 @@ Thumbs.db
 # IDE files
 *.code-workspace
 .idea
-.vscode
+.vscode
+
+# Webpack Stats
+stats.json
diff --git a/inc/class-wp-rainbow-settings.php b/inc/class-wp-rainbow-settings.php
@@ -166,6 +166,11 @@ public function action_rest_api_init() {
 							'goerli',
 						],
 					],
+					'wp_rainbow_field_walletconnect_project_id' => [
+						'required'    => true,
+						'type'        => 'string',
+						'description' => 'WalletConnect Project ID',
+					],
 					'wp_rainbow_field_redirect_url'       => [
 						'required'    => true,
 						'type'        => 'string',
diff --git a/inc/class-wp-rainbow.php b/inc/class-wp-rainbow.php
@@ -92,6 +92,23 @@ public function get_infura_id_filtered() {
 		return apply_filters( 'wp_rainbow_infura_id', $options['wp_rainbow_field_infura_id'] );
 	}
 
+	/**
+	 * Provide filter for WalletConnect Project ID. Defaults to RainbowKit Login global value.
+	 *
+	 * @return mixed|void Filtered WalletConnect Project ID network.
+	 */
+	public function get_walletconnect_project_id_filtered() {
+		$options = get_option( 'wp_rainbow_options', [ 'wp_rainbow_field_walletconnect_project_id' => '' ] );
+		$default = ! empty( $options['wp_rainbow_field_walletconnect_project_id'] ) ? $options['wp_rainbow_field_walletconnect_project_id'] : 'fd1a095387aaa4bfc4cc1437ec3caac3';
+
+		/**
+		 * Filter the WalletConnect Project ID used for WP Rainbow integration.
+		 *
+		 * @param string $default WalletConnect Project ID as set in WP Rainbow options.
+		 */
+		return apply_filters( 'wp_rainbow_walletconnect_project_id', $default );
+	}
+
 	/**
 	 * Provide filter for Infura network. Defaults to settings page value.
 	 *
@@ -217,36 +234,38 @@ public function action_init() {
 			'login-block',
 			'wpRainbowData',
 			[
-				'ADMIN_URL'     => get_admin_url(),
-				'INFURA_ID'     => esc_textarea( $this->get_infura_id_filtered() ),
-				'LOGIN_API'     => get_rest_url( null, 'wp-rainbow/v1/login' ),
-				'NONCE_API'     => get_rest_url( null, 'wp-rainbow/v1/nonce' ),
-				'REDIRECT_URL'  => esc_url( $this->get_redirect_url_filtered() ),
-				'SITE_TITLE'    => get_bloginfo( 'name' ),
-				'COOL_MODE'     => $this->get_cool_mode_filtered(),
-				'THEME'         => $this->get_theme_filtered(),
-				'COMPACT_MODAL' => $this->get_compact_modal_filtered(),
-				'NETWORK'       => esc_textarea( $this->get_infura_network_filtered() ),
-				'ATTRIBUTES'    => $this->get_frontend_attributes(),
+				'ADMIN_URL'                => get_admin_url(),
+				'INFURA_ID'                => esc_textarea( $this->get_infura_id_filtered() ),
+				'LOGIN_API'                => get_rest_url( null, 'wp-rainbow/v1/login' ),
+				'NONCE_API'                => get_rest_url( null, 'wp-rainbow/v1/nonce' ),
+				'REDIRECT_URL'             => esc_url( $this->get_redirect_url_filtered() ),
+				'SITE_TITLE'               => get_bloginfo( 'name' ),
+				'COOL_MODE'                => $this->get_cool_mode_filtered(),
+				'THEME'                    => $this->get_theme_filtered(),
+				'COMPACT_MODAL'            => $this->get_compact_modal_filtered(),
+				'NETWORK'                  => esc_textarea( $this->get_infura_network_filtered() ),
+				'ATTRIBUTES'               => $this->get_frontend_attributes(),
+				'WALLETCONNECT_PROJECT_ID' => esc_textarea( $this->get_walletconnect_project_id_filtered() ),
 			]
 		);
 		wp_localize_script(
 			'login-block-frontend',
 			'wpRainbowData',
 			[
-				'ADMIN_URL'     => get_admin_url(),
-				'INFURA_ID'     => esc_textarea( $this->get_infura_id_filtered() ),
-				'LOGIN_API'     => get_rest_url( null, 'wp-rainbow/v1/login' ),
-				'LOGGED_IN'     => is_user_logged_in(),
-				'NONCE_API'     => get_rest_url( null, 'wp-rainbow/v1/nonce' ),
-				'REDIRECT_URL'  => esc_url( $this->get_redirect_url_filtered() ),
-				'SITE_TITLE'    => get_bloginfo( 'name' ),
-				'LOGOUT_URL'    => wp_logout_url(),
-				'COOL_MODE'     => $this->get_cool_mode_filtered(),
-				'THEME'         => $this->get_theme_filtered(),
-				'COMPACT_MODAL' => $this->get_compact_modal_filtered(),
-				'NETWORK'       => esc_textarea( $this->get_infura_network_filtered() ),
-				'ATTRIBUTES'    => $this->get_frontend_attributes(),
+				'ADMIN_URL'                => get_admin_url(),
+				'INFURA_ID'                => esc_textarea( $this->get_infura_id_filtered() ),
+				'LOGIN_API'                => get_rest_url( null, 'wp-rainbow/v1/login' ),
+				'LOGGED_IN'                => is_user_logged_in(),
+				'NONCE_API'                => get_rest_url( null, 'wp-rainbow/v1/nonce' ),
+				'REDIRECT_URL'             => esc_url( $this->get_redirect_url_filtered() ),
+				'SITE_TITLE'               => get_bloginfo( 'name' ),
+				'LOGOUT_URL'               => wp_logout_url(),
+				'COOL_MODE'                => $this->get_cool_mode_filtered(),
+				'THEME'                    => $this->get_theme_filtered(),
+				'COMPACT_MODAL'            => $this->get_compact_modal_filtered(),
+				'NETWORK'                  => esc_textarea( $this->get_infura_network_filtered() ),
+				'ATTRIBUTES'               => $this->get_frontend_attributes(),
+				'WALLETCONNECT_PROJECT_ID' => esc_textarea( $this->get_walletconnect_project_id_filtered() ),
 			]
 		);
 	}
@@ -333,17 +352,18 @@ public function action_login_enqueue_scripts() {
 			'wp-rainbow-login',
 			'wpRainbowData',
 			[
-				'ADMIN_URL'     => get_admin_url(),
-				'INFURA_ID'     => esc_textarea( $this->get_infura_id_filtered() ),
-				'LOGIN_API'     => get_rest_url( null, 'wp-rainbow/v1/login' ),
-				'NONCE_API'     => get_rest_url( null, 'wp-rainbow/v1/nonce' ),
-				'REDIRECT_URL'  => esc_url( $this->get_redirect_url_filtered() ),
-				'SITE_TITLE'    => get_bloginfo( 'name' ),
-				'COOL_MODE'     => $this->get_cool_mode_filtered(),
-				'NETWORK'       => esc_textarea( $this->get_infura_network_filtered() ),
-				'ATTRIBUTES'    => $this->get_frontend_attributes(),
-				'THEME'         => $this->get_theme_filtered(),
-				'COMPACT_MODAL' => $this->get_compact_modal_filtered(),
+				'ADMIN_URL'                => get_admin_url(),
+				'INFURA_ID'                => esc_textarea( $this->get_infura_id_filtered() ),
+				'LOGIN_API'                => get_rest_url( null, 'wp-rainbow/v1/login' ),
+				'NONCE_API'                => get_rest_url( null, 'wp-rainbow/v1/nonce' ),
+				'REDIRECT_URL'             => esc_url( $this->get_redirect_url_filtered() ),
+				'SITE_TITLE'               => get_bloginfo( 'name' ),
+				'COOL_MODE'                => $this->get_cool_mode_filtered(),
+				'NETWORK'                  => esc_textarea( $this->get_infura_network_filtered() ),
+				'ATTRIBUTES'               => $this->get_frontend_attributes(),
+				'THEME'                    => $this->get_theme_filtered(),
+				'COMPACT_MODAL'            => $this->get_compact_modal_filtered(),
+				'WALLETCONNECT_PROJECT_ID' => esc_textarea( $this->get_walletconnect_project_id_filtered() ),
 			]
 		);
 	}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "wp-rainbow",
-	"version": "0.3.4",
+	"version": "0.4.0",
 	"description": "RainbowKit Login (Web3 Integration for Sign-In With Ethereum)",
 	"author": "Davis Shaver",
 	"license": "GPL-2.0-or-later",
@@ -21,29 +21,29 @@
 		"url": "https://github.com/davisshaver/wp-rainbow/issues"
 	},
 	"dependencies": {
-		"@rainbow-me/rainbowkit": "^0.8.1",
-		"@wordpress/block-editor": "^11.0.0",
-		"@wordpress/blocks": "^12.0.0",
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/i18n": "^4.23.0",
-		"@xmtp/xmtp-js": "^7.7.2",
+		"@rainbow-me/rainbowkit": "^1.0.2",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/i18n": "^4.35.0",
 		"classnames": "^2.3.2",
-		"ethers": "^5.7.2",
 		"process": "^0.11.10",
 		"prop-types": "^15.8.1",
-		"react-hook-form": "^7.41.1",
+		"react-hook-form": "^7.44.3",
 		"react-style-proptype": "^3.2.2",
-		"siwe": "^1.1.6",
+		"siwe": "^2.1.4",
 		"util": "^0.12.5",
-		"wagmi": "^0.9.5"
+		"viem": "^1.0.7",
+		"wagmi": "^1.2.0"
 	},
 	"devDependencies": {
-		"@wordpress/scripts": "^25.0.0",
-		"css-loader": "^6.7.3",
+		"@wordpress/scripts": "^26.6.0",
+		"css-loader": "^6.8.1",
 		"eslint-config-airbnb": "^19.0.4",
-		"style-loader": "^3.3.1",
-		"webpack": "^5.75.0",
-		"webpack-cli": "^4.10.0"
+		"style-loader": "^3.3.3",
+		"webpack": "^5.87.0",
+		"webpack-bundle-analyzer": "^4.9.0",
+		"webpack-cli": "^5.1.4"
 	},
 	"scripts": {
 		"build": "wp-scripts build",
@@ -55,6 +55,7 @@
 		"lint:md-docs": "wp-scripts lint-md-docs",
 		"lint:pkg-json": "wp-scripts lint-pkg-json",
 		"packages-update": "wp-scripts packages-update",
-		"start": "wp-scripts start"
+		"start": "wp-scripts start",
+		"analyze": "webpack --json > stats.json && yarn webpack-bundle-analyzer stats.json"
 	}
 }
diff --git a/readme.txt b/readme.txt
@@ -32,6 +32,8 @@ _Want to try it out? [Head here.](https://wp-rainbow.davisshaver.com/wp-login.ph
 
 Using an Infura ID/API key is required to use most features in this plugin, including token-gating and role mapping. You can [sign up for a free account here](https://infura.io/). The free tier is sufficient for most use cases. If you're using this plugin for a production site, you'll want to [sign up for a paid account](https://infura.io/pricing) to avoid rate limiting.
 
+Supplying your own WalletConnect Project ID is also highly recommended. You can [sign up for a free project ID from WallectConnect Cloud](https://cloud.walletconnect.com/).
+
 == Frequently Asked Questions ==
 
 = What filters are included? =
@@ -46,6 +48,8 @@ Find reference implementations of all filters in [example plugin here](https://g
 
 **`wp_rainbow_infura_id`** - Filter Infura ID/API key to override settings value.
 
+**`wp_rainbow_walletconnect_project_id`** - Filter WalletConnect project ID to override settings value.
+
 **`wp_rainbow_infura_network`** - Filter Infura network to override settings value.
 
 **`wp_rainbow_redirect_url`** - Filter login redirect URL.
@@ -66,6 +70,9 @@ Find reference implementations of all filters in [example plugin here](https://g
 
 == Changelog ==
 
+= 0.4.0 =
+* Update WAGMI, RainbowKit, and web3 dependencies
+
 = 0.3.4 =
 * Use patched version of web3 library to fix BigNumber issue
 
diff --git a/src/connect.jsx b/src/connect.jsx
@@ -4,7 +4,7 @@ import {
 	useAccount,
 	useDisconnect,
 	useEnsName,
-	useProvider,
+	usePublicClient,
 	useNetwork,
 	useSignMessage,
 } from 'wagmi';
@@ -66,7 +66,9 @@ export function WPRainbowConnect( {
 		chainId: 1,
 	} );
 
-	const provider = useProvider( { chainId: 1 } );
+	const provider = usePublicClient( {
+		chainId: 1,
+	} );
 
 	const { disconnectAsync } = useDisconnect();
 
@@ -99,11 +101,11 @@ export function WPRainbowConnect( {
 			const attributes = {};
 			if ( ensName ) {
 				try {
-					const ensProvider = await provider.getResolver( ensName );
 					await ATTRIBUTES.forEach( async ( attributeKey ) => {
-						const attributeValue = await ensProvider.getText(
-							attributeKey
-						);
+						const attributeValue = await provider.getEnsText( {
+							name: ensName,
+							key: attributeKey,
+						} );
 						attributes[ attributeKey ] = attributeValue;
 					} );
 				} catch ( error ) {
@@ -118,6 +120,7 @@ export function WPRainbowConnect( {
 				setState( ( x ) => ( { ...x, address, loading: false } ) );
 				return;
 			}
+
 			const verifyRes = await fetch( LOGIN_API, {
 				method: 'POST',
 				headers: {
diff --git a/src/login.jsx b/src/login.jsx
@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { createRoot } from '@wordpress/element';
 import WPRainbow from './provider';
 import { addErrorMessage } from './utilities/addErrorMessage';
 
@@ -26,5 +27,6 @@ const LoginPageElement = (
 const wpRainbowButton = document.getElementById( 'wp-rainbow-button' );
 
 if ( wpRainbowButton ) {
-	ReactDOM.render( LoginPageElement, wpRainbowButton );
+	const root = createRoot( wpRainbowButton );
+	root.render( LoginPageElement );
 }
diff --git a/src/provider.jsx b/src/provider.jsx
@@ -1,14 +1,32 @@
 import {
-	getDefaultWallets,
 	RainbowKitProvider,
 	lightTheme,
 	darkTheme,
 	midnightTheme,
+	connectorsForWallets,
 } from '@rainbow-me/rainbowkit';
-import { createClient, configureChains, WagmiConfig } from 'wagmi';
-import * as allChains from 'wagmi/chains';
+import {
+	metaMaskWallet,
+	rainbowWallet,
+	walletConnectWallet,
+	injectedWallet,
+	coinbaseWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+import { createConfig, configureChains, WagmiConfig } from 'wagmi';
+import {
+	mainnet,
+	optimism,
+	arbitrum,
+	goerli,
+	polygon,
+	optimismGoerli,
+	baseGoerli,
+	foundry,
+	zoraTestnet,
+} from 'wagmi/chains';
 import { infuraProvider } from 'wagmi/providers/infura';
 import stylePropType from 'react-style-proptype';
+import { publicProvider } from 'wagmi/providers/public';
 
 import PropTypes from 'prop-types';
 import { WPRainbowConnect } from './connect';
@@ -21,30 +39,57 @@ const {
 	NETWORK,
 	SITE_TITLE,
 	THEME,
+	WALLETCONNECT_PROJECT_ID,
 } = wpRainbowData;
 
 const themes = {
 	lightTheme,
 	darkTheme,
 	midnightTheme,
 };
-const { chains, provider } = configureChains(
+
+const allChains = {
+	mainnet,
+	optimism,
+	arbitrum,
+	goerli,
+	polygon,
+	optimismGoerli,
+	baseGoerli,
+	foundry,
+	zoraTestnet,
+};
+
+const { chains, publicClient } = configureChains(
 	[
 		...( NETWORK && allChains[ NETWORK ] ? [ allChains[ NETWORK ] ] : [] ),
 		allChains.mainnet,
 	],
-	[ infuraProvider( { infuraId: INFURA_ID } ) ]
+	[ infuraProvider( { apiKey: INFURA_ID } ), publicProvider() ]
 );
 
-const { connectors } = getDefaultWallets( {
-	appName: SITE_TITLE,
-	chains,
-} );
+const wallets = [
+	{
+		groupName: 'Popular',
+		wallets: [
+			injectedWallet( { chains } ),
+			rainbowWallet( { chains, projectId: WALLETCONNECT_PROJECT_ID } ),
+			coinbaseWallet( { appName: SITE_TITLE, chains } ),
+			metaMaskWallet( { chains, projectId: WALLETCONNECT_PROJECT_ID } ),
+			walletConnectWallet( {
+				chains,
+				projectId: WALLETCONNECT_PROJECT_ID,
+			} ),
+		],
+	},
+];
+
+const connectors = connectorsForWallets( wallets );
 
-const wagmiClient = createClient( {
+const wagmiConfig = createConfig( {
 	autoConnect: LOGGED_IN === '1',
 	connectors,
-	provider,
+	publicClient,
 } );
 
 /**
@@ -83,7 +128,7 @@ function WPRainbow( {
 	style,
 } ) {
 	return (
-		<WagmiConfig client={ wagmiClient }>
+		<WagmiConfig config={ wagmiConfig }>
 			<RainbowKitProvider
 				chains={ chains }
 				coolMode={ COOL_MODE === 'on' }
diff --git a/src/settings.jsx b/src/settings.jsx
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/wp-rainbow.php b/wp-rainbow.php
diff --git a/yarn.lock b/yarn.lock
