Upgrade Verida SDK + update doc about some changes (#226)

docs/single-sign-on-sdk/getting-started.md

@@ -24,35 +24,21 @@ import { Network } from '@verida/client-ts';
 import { EnvironmentType } from '@verida/types';
 import { VaultAccount } from '@verida/account-web-vault';
 
-// (optional) Import WalletConnect if required
-import WalletConnect from "@walletconnect/client";
-
 const VERIDA_ENVIRONMENT = EnvironmentType.TESTNET;
 const CONTEXT_NAME = 'My Application: Context Name';
 
-// (optional) WalletConnect configuration
-// See the WalletConnect section of the documentation for details
-const DEFAULT_CHAIN_ID = "eip155:1"
-connector = new WalletConnect({
-    bridge: 'https://bridge.walletconnect.org',
-});
-
-// Logo for your application
-// The LOGO_URL should be a 170x170 PNG file
+// Logo for your application, should be a 170x170 PNG file
 const LOGO_URL = "https://assets.verida.io/verida_login_request_logo_170x170.png";
 
 const account = new VaultAccount({
   request: {
     logoUrl: LOGO_URL,
-    // An optional URL that will open a browser on the user's mobile device
+    // openURL: An optional URL that will open a browser on the user's mobile device
     // after accepting the login request in the Verida Wallet mobile app
     openURL: window.location.href,
   },
-  walletConnect: {
-    version: connector.version,
-    uri: connector.uri,
-    chainId: DEFAULT_CHAIN_ID,
-  },
+  // environment: Indicates to the Wallet which network the identity should be on.
+  environment: VERIDA_ENVIRONMENT,
 });
 
 const context = await Network.connect({

docs/single-sign-on-sdk/web-user.md

@@ -29,7 +29,8 @@ export const user = new WebUser({
     accountConfig: {
         request: {
             logoUrl: LOGO_URL
-        }
+        },
+        environment: VERIDA_ENVIRONMENT
     },
     clientConfig: {
         environment: VERIDA_ENVIRONMENT

docs/tutorial/SSO.mdx

@@ -7,7 +7,7 @@ keywords: [Verida, Web3, Developers, Tutorial, Verida Connect, Wallet connect]
 
 import ReactPlayer from 'react-player';
 
-# Sign-in with Verida Connect SDK 
+# Sign-in with Verida Connect SDK
 
 ## See a walk through of the code
 
@@ -55,12 +55,13 @@ VeridaLoginExample = () => {
 		const account = new VaultAccount({
 			request: {
 				logoUrl: 'https://developers.verida.io/img/tutorial_login_request_logo_170x170.png',
-		    },
+		  },
+			environment: EnvironmentType.MAINNET,
 		});
 
 		const context = await Network.connect({
 			client: {
-				environment: 'testnet'
+				environment: EnvironmentType.MAINNET,
 			},
 			account: account,
 			context: {
@@ -71,7 +72,7 @@ VeridaLoginExample = () => {
 		if (context) {
 			// set the local state variable
 		   setVeridaContext(context);
-		} 
+		}
 	};
 
 	logout = async function () {
@@ -96,7 +97,7 @@ VeridaLoginExample = () => {
 				<button onClick={this.logout}>Logout</button>
 			</div>
 		);
-	} else { 
+	} else {
 		return (
 			<div>
 				<button onClick={this.login}>Login</button>

docs/tutorial/walletconnect_verida.mdx

@@ -20,7 +20,7 @@ how to use the live code :
 :::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 
+Steps to fix this error
  - Please ensure the Verida Wallet is updated to the latest version
  - Login again to establish a WalletConnect session
 
@@ -90,14 +90,15 @@ VeridaLoginExample = () => {
     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. 
+        // 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
         }
       },
+      environment: 'testnet'
     });
     const context = await Network.connect({
       client: {
@@ -141,7 +142,7 @@ VeridaLoginExample = () => {
         message,
         address
       ];
-      // Learn more about WalletConnect personal_sign here 
+      // Learn more about WalletConnect personal_sign here
       // https://docs.walletconnect.com/1.0/quick-start/dapps/client#sign-personal-message-personal_sign
       const result = await walletConnector.signPersonalMessage(msgParams);
       if(result) {
@@ -192,8 +193,8 @@ VeridaLoginExample = () => {
             }
             <button onClick={this.logout} style={styles}>Logout</button>
             {
-            walletConnector 
-            && (processingWc ? 'Processing....' : 
+            walletConnector
+            && (processingWc ? 'Processing....' :
               <button onClick={this.signInPersonalMessage}>
                 Sign Personal Message
               </button>

package.json

@@ -22,10 +22,10 @@
 		"@docusaurus/theme-search-algolia": "^2.4.3",
 		"@mdx-js/react": "^1.6.21",
 		"@svgr/webpack": "^5.5.0",
-		"@verida/account-web-vault": "^2.3.9",
-		"@verida/client-ts": "^2.3.9",
-		"@verida/types": "^2.3.1",
-		"@verida/verifiable-credentials": "^2.3.9",
+		"@verida/account-web-vault": "^3.0.2",
+		"@verida/client-ts": "^3.0.3",
+		"@verida/types": "^3.0.1",
+		"@verida/verifiable-credentials": "^3.0.3",
 		"@walletconnect/client": "^1.8.0",
 		"clsx": "^1.1.1",
 		"crypto-browserify": "^3.12.0",

src/theme/ReactLiveScope/index.js

@@ -6,6 +6,7 @@
  */
 
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import { EnvironmentType } from "@verida/types";
 import React, { useEffect, useState } from "react";
 import { store, useGlobalState } from "state-pool";
 
@@ -84,11 +85,12 @@ if (ExecutionEnvironment.canUseDOM) {
           "https://developers.verida.io/img/tutorial_login_request_logo_170x170.png",
         walletConnect,
       },
+      environment: EnvironmentType.MAINNET,
     });
 
     const context = await Network.connect({
       client: {
-        environment: "testnet",
+        environment: EnvironmentType.MAINNET,
       },
       account: globalAccount,
       context: {
@@ -114,7 +116,8 @@ const ReactLiveScope = {
   WalletConnect,
   globalAccount,
   globalLoginFunction,
-  getCircularReplacer
+  getCircularReplacer,
+  EnvironmentType
 };
 
 export default ReactLiveScope;