WalletConnect + Verida Connect
The code below shows how to connect with both the Verida Network and WalletConnect providing a unified connection experience for the user . how to use the live code :
- You can press the "Login" button to login, and edit the code to see how it works
- After a successfully sign in you can sign a personal message using the "Sign Personal Message" button
Try it out
caution
You may get an error that display : "Session is disconnected" this means you're currently logged in without a WalletConnect session. Steps to fix this error
- Please ensure the Verida Wallet is updated to the latest version
- Login again to establish a WalletConnect session
Live Editor
VeridaLoginExample = () => {const [veridaContext, setVeridaContext] = useState(undefined);const [successMessage, setSuccessMessage] = useState(null);const [errorMessage, setErrorMessage] = useState(null);const [isLoading, setIsLoading] = useState(false);const [processingWc, setProcessingWc] = useState(false);const [walletConnector, setWalletConnector] = useState(undefined);this.CONTEXT_NAME = 'Verida: Tutorial';const styles ={marginRight: '0.7rem'}React.useEffect(async () => {// We use this to check if we are logged inif (!veridaContext) {// we don't have veridaContext in local state// Check if we have a stored session// hasSession is from the package "@verida/account-web-vault"if (hasSession(this.CONTEXT_NAME)) {// we know we have a session alreadylogin(); // when logged in this will just setup a Verida Context}}}, []);initWalletConnect = async function () {// see link to learn more on how to initialize wallet connect// https://docs.walletconnect.com/1.0/quick-start/dapps/client#initiate-connectionconst bridgeURL = 'https://bridge.walletconnect.org';const connector = new WalletConnect.default({bridge: bridgeURL});// Check if connection is already establishedif (!connector.connected) {// create new sessionawait connector.createSession();}connector.on("connect", (error, payload) => {setWalletConnector(connector);console.log("WalletConnect on connect payload:", payload);})connector.on("disconnect", (error, payload) => {if (error) {console.error(error);return;}});return connector}login = async function () {const CHAIN_ID = 'eip155:1';setIsLoading(true)connector = await initWalletConnect()// Create a VaultAccount. This takes a VaultAccountConfig parameter.const account = new VaultAccount({request: {logoUrl: 'https://developers.verida.io/img/tutorial_login_request_logo_170x170.png',// Pass the WalletConnect details required for the connection.// Please not that the wallet connect object is optional.walletConnect: {version: connector.version,uri: connector.uri,chainId: CHAIN_ID}},});const context = await Network.connect({client: {environment: 'testnet'},account: account,context: {name: this.CONTEXT_NAME}});if(context) {// set the local state variablesetVeridaContext(context);}// check if WalletConnect is connectedif(connector.connected) {setWalletConnector(connector);}setIsLoading(false)};logout = async function () {// disconnect WalletConnect sessionif (walletConnector) {walletConnector.killSession();setWalletConnector(undefined);}// disconnect the Verida sessionawait veridaContext.account.disconnect(this.CONTEXT_NAME);// reset the internal statesetVeridaContext(undefined);};signInPersonalMessage = async function () {setProcessingWc(true)try {const did = veridaContext.account.accountDidconst message = `This is my DID ${did}`;const address = walletConnector._accounts[0]const msgParams = [message,address];// Learn more about WalletConnect personal_sign here// https://docs.walletconnect.com/1.0/quick-start/dapps/client#sign-personal-message-personal_signconst result = await walletConnector.signPersonalMessage(msgParams);if(result) {setSuccessMessage(result)}} catch (error) {console.log({ error })if(error.message && error.message === "Session currently disconnected") {setErrorMessage(`WalletConnect : ${error.message}Please click the on the logout button andlogin again to establish a WalletConnect session`)}} finally {setProcessingWc(false)}}// if we have a veridaContext we are logged inif(veridaContext) {// user is logged inreturn (<div>{isLoading ? 'Verida connect in progress please wait....' :<><h3 style={styles}>Logged in! Your<a href='/docs/concepts/accounts-and-identity'style={styles}>DID</a>is:</h3><spanstyle={{display: 'block', marginTop: '0.7rem',marginBottom: '0.7rem'}}>{veridaContext.account.accountDid}</span>{successMessage && <h3>Successfully Signed Signature :<pre>{successMessage}</pre></h3>}<button onClick={this.logout} style={styles}>Logout</button>{walletConnector&& (processingWc ? 'Processing....' :<button onClick={this.signInPersonalMessage}>Sign Personal Message</button>)}</>}{errorMessage &&<span style={{ color: "red", display: 'block', fontStyle: 'italic' }}>{errorMessage}</span>}</div>);} else {return (<div><button onClick={this.login}>Login</button></div>);}}
Result
Loading...