ssx-react/v2.0.0
2.0.0
Major rework to enable customizability
@spruceid/ssx-react
no longer depends on wagmi
. Instead, function hooks must be defined and used as arguments to the component.
onChangeAccount
property no longer exists. Replaced by thewatchProvider
property, which now allows for more customizability.web3Provider.providerLoaded
property was also removed. The new architecture assumes the provider no longer needs to be initialized, and callback functions will be called when changes occur.useSSX
now returns thessx
instance and theprovider
.- Now
watchProvider
is the new interface for listening to provider changes. The developer must set up this function to be called whenever an interaction with the user happens. An example of how to do it can be found here.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { WagmiConfig, useWalletClient } from 'wagmi';
import { Web3Modal } from '@web3modal/react';
import { SSXProvider } from '@spruceid/ssx-react';
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
import { configureChains, createConfig } from 'wagmi';
import { polygon, mainnet, goerli, sepolia } from 'wagmi/chains';
import { type WalletClient } from '@wagmi/core';
import { providers } from 'ethers';
// 1. Get projectID at https://cloud.walletconnect.com
if (!process.env.REACT_APP_PROJECT_ID) {
console.error('You need to provide REACT_APP_PROJECT_ID env variable');
}
export const projectId = process.env.REACT_APP_PROJECT_ID ?? "";
// 2. Configure wagmi client
const chains = [mainnet, goerli, sepolia, polygon];
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
export const wagmiConfig = createConfig({
autoConnect: false,
connectors: w3mConnectors({ projectId, chains }),
publicClient
});
// 3. Configure modal ethereum client
export const ethereumClient = new EthereumClient(wagmiConfig, chains);
export function walletClientToEthers5Signer(walletClient: WalletClient) {
const { account, chain, transport } = walletClient
const network = {
chainId: chain.id,
name: chain.name,
ensAddress: chain.contracts?.ensRegistry?.address,
}
const provider = new providers.Web3Provider(transport, network)
const signer = provider.getSigner(account.address)
return signer
}
function SSXWithoutWatchProvider({ children }: any) {
const { data: walletClient } = useWalletClient();
const web3Provider = { provider: walletClient };
return (
<SSXProvider
ssxConfig={{ siweConfig: { domain: 'localhost:3000' }}}
web3Provider={web3Provider}>
{children}
</SSXProvider>
);
}
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<WagmiConfig config={wagmiConfig}>
<SSXWithoutWatchProvider>
/* your code goes here */
</SSXWithoutWatchProvider>
</WagmiConfig>
<Web3ModalV2 projectId={projectId} ethereumClient={ethereumClient} />
</React.StrictMode>
);
You can check here a more detailed example.
Updated dependencies
Updated several dependencies.