[Feature]: Integrate old 1.x wagmi core with web3-onboard

[thestingraider]

Is your request related to a problem?

Sort of an issue if developers using wagmi 1.x wish to use this to plugNPlay with their existing wagmi hooks.

Feature Description

It would be good to go back to wagmi 1.x and get a config setup and working to work with older wagmi versions.
Trying to use web3-onboard with older 1.x versions leads to issues and errors where the wagmi client is not able to read wallet event changes. If this were to be produced, it would make wagmi and web3-onboard 100x easier. The current setup of using your own functions with a wagmi connector just adds long tedious code to the un-needed process. Wagmi should be the core without external modules overriding their internal functions.

Alternative Solutions

https://1.x.wagmi.sh/examples/custom-connector
Maybe the connector is the issue I'm not too sure but I know that when debugging the createConfig value, it's different from my 1.x wagmi config.

I'm setting wagmi config like this in root:

<QueryClientProvider client={queryClient}>
<WagmiConfig config={wagmiConfigBlocknative}>
<div>Hi</div>
</WagmiConfig>
</QueryClientProvider>

And initializing web3-onboard like this:

export const BlockNativeConnection = ({ onConfigReady }) => {
const [onboard, setOnboard] = useState(null);
const [wallet, setWallet] = useState(null);
useEffect(() => {
const onboardInstance = Onboard({
wagmi,
wallets: [injected],
chains: transformedChains,
theme: 'dark'
});
setOnboard(onboardInstance);
const subscription = onboardInstance.state.select('wallets').subscribe(async wallets => {
if (wallets.length > 0) {
console.log([*] wallets, wallets);
const wallet = wallets[0];
setWallet(wallet);
// Log current state
const currentState = onboardInstance.state.get();
console.log([*] currentState:, currentState);
// I want the wagmiConfig to be the same as the wagmiConfig in the currentState
const wagmiConfig = currentState.wagmiConfig;
console.log([*] wagmiConfig:, wagmiConfig);
onConfigReady(wagmiConfig); // Pass the config to the parent component
console.log([*] wagmiConfig updated, wagmiConfig);
var client = wagmiConfig.getClient();
console.log([*] client:, client);
}
});
return () => subscription.unsubscribe();
}, [onConfigReady]);
const handleConnect = async () => {
try {
if (onboard) {
const wallets = await onboard.connectWallet();
console.log([*] wallets, wallets);
if (wallets.length > 0) {
const wallet = wallets[0];
console.log([*] wallet, wallet);
setWallet(wallet);
}
}
} catch (error) {
console.error('Error connecting wallet:', error);
}
};
return (
<div>
{wallet ? (
<div>Connected account: {wallet.accounts[0].address}</div>
) : (
<button onClick={handleConnect}>
Connect Wallet
</button>
)}
</div>
);
};

Package.json is this:

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node build.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"esbuild": "^0.20.0",
"eslint": "^9.0.0",
"ethers": "^6.11.1"
},
"dependencies": {
"@ledgerhq/ledger-live-wagmi-connector": "^0.4.0",
"@opensea/seaport-js": "^4.0.0",
"@rainbow-me/rainbowkit": "^1.3.3",
"@tanstack/react-query": "^4.36.1",
"@wagmi/core": "^1.3.8",
"@walletconnect/sign-client": "^2.11.0",
"@walletconnect/universal-provider": "^2.11.0",
"@web3-onboard/core": "^2.22.2",
"@web3-onboard/injected-wallets": "^2.11.1",
"@web3-onboard/react": "^2.9.2",
"@web3-onboard/wagmi": "^2.0.1",
"@web3modal/ethereum": "^2.7.1",
"@web3modal/react": "^2.7.1",
"@web3modal/standalone": "2.0.0-rc.1",
"@web3modal/wagmi1": "^4.0.0-544a28f1",
"alchemy-sdk": "^3.1.2",
"merkletreejs": "^0.3.11",
"node-fetch": "^2.0.0",
"opensea-js": "^7.0.9",
"react": "^18.2.0",
"react-query": "^3.39.3",
"react-router-dom": "^6.21.3",
"viem": "^1.21.4",
"wagmi": "^1.3.9"
}
}

### Something like this would make all of our lives easier:

import Web3OnBoardConnector from '@web3-onboard/connector';
import { useAccount, sendTransaction } from 'wagmi';

const ClientData = () => {
    const { isConnected, address, connector } = useAccount();
    return (
        <div>
            <h1>Client Data</h1>
            <p>isConnected: {isConnected ? 'true' : 'false'}</p>
            <p>address: {address}</p>
            <p>connector: {connector}</p>
        </div>
    );
}

// Example on how to send a transaction
// Note: it would use wagmi functions to send a transaction and keep the provider under the hood like wagmi does
// for ease and access anywhere
// as soon as the wagmi config is created and passed to the <WagmiConfig> it would be accessible anywhere within the wrapper
const sendATransaction = async () => {
    const tx = await sendTransaction({
        to: '0x0000000000000000000000000000000000000000',
        value: parseEther('1'),
    });
}

const App = () => {

    var wagmiConfig = createConfig({
        autoConnect: false,
        connectors: [new Web3OnBoardConnector({options: {}})],
        publicClient,
        webSocketPublicClient
    });

    <WagmiConfig config={wagmiConfig}>
        <ClientData />
    </WagmiConfig>
}