diff --git a/demo/auth0-redirect-flow-example/package-lock.json b/demo/auth0-redirect-flow-example/package-lock.json index a095cfb3..a4c451b4 100644 --- a/demo/auth0-redirect-flow-example/package-lock.json +++ b/demo/auth0-redirect-flow-example/package-lock.json @@ -45,26 +45,25 @@ }, "../..": { "name": "@web3auth/mpc-core-kit", - "version": "1.0.3", + "version": "2.3.0-0", "license": "ISC", "dependencies": { - "@tkey-mpc/chrome-storage": "^8.2.2", - "@tkey-mpc/common-types": "^8.2.2", - "@tkey-mpc/core": "^8.2.2", - "@tkey-mpc/security-questions": "^8.2.2", - "@tkey-mpc/service-provider-torus": "^8.2.2", - "@tkey-mpc/share-serialization": "^8.2.2", - "@tkey-mpc/storage-layer-torus": "^8.2.2", + "@metamask/swappable-obj-proxy": "^2.1.0", + "@tkey-mpc/common-types": "^9.1.0", + "@tkey-mpc/core": "^9.1.1", + "@tkey-mpc/service-provider-torus": "^9.1.0", + "@tkey-mpc/share-serialization": "^9.1.0", + "@tkey-mpc/storage-layer-torus": "^9.1.0", "@toruslabs/constants": "^13.0.1", - "@toruslabs/customauth": "^16.0.4", + "@toruslabs/customauth": "^16.0.6", "@toruslabs/eccrypto": "4.0.0", "@toruslabs/fetch-node-details": "^13.0.1", - "@toruslabs/fnd-base": "^13.0.1", + "@toruslabs/fnd-base": "^13.1.1", "@toruslabs/metadata-helpers": "^5.x", "@toruslabs/openlogin-session-manager": "^3.0.0", - "@toruslabs/torus.js": "^11.0.5", - "@toruslabs/tss-client": "^1.7.1", - "@toruslabs/tss-lib": "^1.7.1", + "@toruslabs/torus.js": "^12.1.0", + "@toruslabs/tss-client": "^2.1.0", + "@toruslabs/tss-lib": "^2.0.0", "@web3auth-mpc/ethereum-provider": "^2.3.0", "@web3auth/base": "^7.0.1", "@web3auth/base-provider": "^7.0.1", @@ -77,8 +76,10 @@ "@toruslabs/config": "^2.0.2", "@toruslabs/eslint-config-typescript": "^3.0.1", "@toruslabs/torus-scripts": "^5.0.5", + "@toruslabs/tss-lib-node": "^1.1.3", "@types/chai": "^4.3.6", "@types/elliptic": "^6.4.14", + "@types/jsonwebtoken": "^9.0.5", "@types/node": "^20.6.3", "@typescript-eslint/eslint-plugin": "^6.7.0", "chai": "^4.3.8", @@ -87,6 +88,7 @@ "esbuild-register": "^3.5.0", "eslint": "^8.49.0", "husky": "^8.0.3", + "jsonwebtoken": "^9.0.2", "lint-staged": "^14.0.1", "mocha": "^10.2.0", "node-fetch": "^3.3.2", @@ -98,9 +100,12 @@ "tslib": "^2.6.2", "typescript": "^5.2.2" }, + "engines": { + "node": ">=20.x" + }, "peerDependencies": { "@babel/runtime": "^7.x", - "@toruslabs/metadata-helpers": "^4.x" + "@toruslabs/metadata-helpers": "^5.x" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/demo/auth0-redirect-flow-example/src/App.tsx b/demo/auth0-redirect-flow-example/src/App.tsx index 877d6ebb..4bb59d63 100644 --- a/demo/auth0-redirect-flow-example/src/App.tsx +++ b/demo/auth0-redirect-flow-example/src/App.tsx @@ -508,7 +508,7 @@ function App() { return (

- + Web3Auth MPC Core Kit {" "} Auth0 Redirect Flow Example @@ -520,9 +520,10 @@ function App() {

); diff --git a/demo/redirect-flow-example/package-lock.json b/demo/redirect-flow-example/package-lock.json index 31dcb1ba..a7feaefc 100644 --- a/demo/redirect-flow-example/package-lock.json +++ b/demo/redirect-flow-example/package-lock.json @@ -46,7 +46,7 @@ }, "../..": { "name": "@web3auth/mpc-core-kit", - "version": "2.1.0", + "version": "2.3.0-0", "license": "ISC", "dependencies": { "@metamask/swappable-obj-proxy": "^2.1.0", diff --git a/demo/redirect-flow-example/src/App.css b/demo/redirect-flow-example/src/App.css index 8f38bacd..1e4da057 100644 --- a/demo/redirect-flow-example/src/App.css +++ b/demo/redirect-flow-example/src/App.css @@ -19,20 +19,92 @@ font-size: 3rem; text-align: center; margin: 50px; + margin-bottom: 0; } .subtitle { line-height: 1.15; - font-size: 1.5rem; + font-size: 2.5rem; text-align: center; - margin: 10px; + margin: 20px; } .title a { - color: #0070f3; text-decoration: none; } +.title .first{ + color: #0364ff; +} + +.title .second{ + color: #bb65ff; +} + +.input { + width: 50%; + padding: 8px 12px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + outline: none; +} + +.input:focus { + border-color: #0364ff; +} + +.input:valid { + border-color: #0364ff; /* Green border for valid input */ +} + +.input:invalid { + border-color: #dc3545; /* Red border for invalid input */ +} + +.input-wrapper { + display: flex; + align-items: center; +} + +.inputMock { + flex: 1; + padding: 8px 12px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + outline: none; + min-width: 300px; +} + +.mockLoginBtn { + padding: 8px 12px; + font-size: 16px; + border: 1px solid #0364ff; + border-radius: 4px; + background-color: #ffffff; + color: #0364ff; + cursor: pointer; + margin-left: 10px; +} + +.mockLoginBtn:hover { + background-color: #0364ff; + color: #ffffff; +} + +.deleteSecurityQuestion{ + border-color: #dc3545 !important; + color: #dc3545 !important; +} + +.deleteSecurityQuestion:hover{ + background-color: #dd4554 !important; + color: #ffffff !important; + border-color: #dc3545 !important; +} + + .grid { display: flex; align-items: center; @@ -56,7 +128,8 @@ .card:focus, .card:active { cursor: pointer; - background-color: #f1f1f1; + background-color: #0070f3; + color: #ffffff; } .footer { diff --git a/demo/redirect-flow-example/src/App.tsx b/demo/redirect-flow-example/src/App.tsx index 3c40586d..2fcd53d3 100644 --- a/demo/redirect-flow-example/src/App.tsx +++ b/demo/redirect-flow-example/src/App.tsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from "react"; -import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK, Point, SubVerifierDetailsParams, TssShareType, keyToMnemonic, getWebBrowserFactor, COREKIT_STATUS, TssSecurityQuestion, generateFactorKey, mnemonicToKey, parseToken, DEFAULT_CHAIN_CONFIG } from "@web3auth/mpc-core-kit"; +import { useEffect, useMemo, useState } from "react"; +import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK, Point, SubVerifierDetailsParams, TssShareType, keyToMnemonic, getWebBrowserFactor, COREKIT_STATUS, TssSecurityQuestion, generateFactorKey, mnemonicToKey, parseToken } from "@web3auth/mpc-core-kit"; import Web3 from "web3"; import type { provider } from "web3-core"; @@ -27,13 +27,26 @@ const selectedNetwork = WEB3AUTH_NETWORK.DEVNET; // setupProvdiverOnInit: false, // } +const newChainConfig = { + chainId: "0xaa36a7", // for wallet connect make sure to pass in this chain in the loginSettings of the adapter. + displayName: "Ethereum Sepolia", + chainNamespace: CHAIN_NAMESPACES.EIP155, + tickerName: "Ethereum Sepolia", + ticker: "ETH", + decimals: 18, + rpcTarget: "https://rpc.ankr.com/eth_sepolia", + blockExplorer: "https://sepolia.etherscan.io", + logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png", +}; + const coreKitInstance = new Web3AuthMPCCoreKit( { web3AuthClientId: 'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ', web3AuthNetwork: selectedNetwork, uxMode: 'redirect', manualSync: true, - setupProviderOnInit: false + setupProviderOnInit: false, + chainConfig: newChainConfig } ); @@ -65,7 +78,6 @@ export const mockLogin = async (email: string) => { function App() { const [mockEmail, setMockEmail] = useState(undefined); - const [backupFactorKey, setBackupFactorKey] = useState(undefined); const [provider, setProvider] = useState(null); const [web3, setWeb3] = useState(undefined) @@ -77,10 +89,7 @@ function App() { const [question, setQuestion] = useState(undefined); const [newQuestion, setNewQuestion] = useState(undefined); - - - - const securityQuestion: TssSecurityQuestion = new TssSecurityQuestion(); + const securityQuestion: TssSecurityQuestion = useMemo(() => new TssSecurityQuestion(), []); // decide whether to rehydrate session const rehydrate = true; @@ -91,12 +100,12 @@ function App() { if (window.location.hash.includes("#state")) { await coreKitInstance.handleRedirectResult(); } - if (coreKitInstance.provider) { + console.log("coreKitInstance.provider", coreKitInstance.provider) setProvider(coreKitInstance.provider); } else { if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) { - coreKitInstance.setupProvider({ chainConfig: DEFAULT_CHAIN_CONFIG }).then(() => { + coreKitInstance.setupProvider({ chainConfig: newChainConfig }).then(() => { setProvider(coreKitInstance.provider); }); } @@ -118,7 +127,7 @@ function App() { } }; init(); - }, []); + }, [rehydrate, securityQuestion]); useEffect(() => { if (provider) { @@ -127,7 +136,6 @@ function App() { } }, [provider]) - const keyDetails = async () => { if (!coreKitInstance) { throw new Error('coreKitInstance not found'); @@ -164,7 +172,7 @@ function App() { setProvider(coreKitInstance.provider); } else { - coreKitInstance.setupProvider({ chainConfig: DEFAULT_CHAIN_CONFIG }).then((provider) => { + coreKitInstance.setupProvider({ chainConfig: newChainConfig }).then((provider) => { setProvider(coreKitInstance.provider); }); @@ -277,9 +285,7 @@ function App() { let mnemonic = keyToMnemonic(factorKey.private.toString('hex')); let key = mnemonicToKey(mnemonic); - uiConsole("Export factor key: ", factorKey); - console.log("menmonic : ", mnemonic); - console.log("key: ", key); + uiConsole("Export factor key: ", factorKey, "menmonic : ", mnemonic, "key: ", key); } const deleteFactor = async (): Promise => { @@ -328,7 +334,8 @@ function App() { const balance = web3.utils.fromWei( await web3.eth.getBalance(address) // Balance is in wei ); - uiConsole(balance); + const balanceText = `Balance of ${address} is ${balance}!`; + uiConsole(balanceText); return balance; }; @@ -400,7 +407,7 @@ function App() { }; await coreKitInstance.switchChain(newChainConfig); setProvider(coreKitInstance.provider); - uiConsole("Changed to Sepolia Network"); + uiConsole("Changed to Polygon Network"); }; const switchChainOPBNB = async () => { @@ -421,7 +428,7 @@ function App() { }; await coreKitInstance.switchChain(newChainConfig); setProvider(coreKitInstance.provider); - uiConsole("Changed to Sepolia Network"); + uiConsole("Changed to Optimism Network"); }; const criticalResetAccount = async (): Promise => { @@ -483,6 +490,7 @@ function App() { let result = await securityQuestion.getQuestion(coreKitInstance); if (result) { setQuestion(question); + uiConsole("Security Question changed", result, "click on Commit Changes button to commit the changes"); } } @@ -509,7 +517,12 @@ function App() { if (!coreKitInstance) { throw new Error("coreKitInstance is not set"); } - await coreKitInstance.commitChanges(); + try { + await coreKitInstance.commitChanges(); + uiConsole("Changes Committed!"); + } catch (error) { + uiConsole(error); + } } const loggedInView = ( @@ -573,13 +586,13 @@ function App() {
- setFactorPubToDelete(e.target.value)}> + setFactorPubToDelete(e.target.value)}>
- setBackupFactorKey(e.target.value)}> + setBackupFactorKey(e.target.value)}> @@ -592,8 +605,8 @@ function App() {
- setNewQuestion(e.target.value)}> - setAnswer(e.target.value)}> + setNewQuestion(e.target.value)}> + setAnswer(e.target.value)}> @@ -601,9 +614,9 @@ function App() {
- setNewQuestion(e.target.value)}> - setNewAnswer(e.target.value)}> - setAnswer(e.target.value)}> + setNewQuestion(e.target.value)}> + setNewAnswer(e.target.value)}> + setAnswer(e.target.value)}> @@ -612,7 +625,7 @@ function App() {
-
@@ -626,7 +639,7 @@ function App() { +
+ setMockEmail(e.target.value)} required> + +
- setBackupFactorKey(e.target.value)}> + setBackupFactorKey(e.target.value)}> @@ -695,7 +708,7 @@ function App() { - setAnswer(e.target.value)}> + setAnswer(e.target.value)}> @@ -712,21 +725,27 @@ function App() { return (

- - Web3Auth MPC Core Kit + + Web3Auth + {" "} + + MPC Core Kit {" "} - Redirect Flow Example

+

+ Redirect Flow Example +

{coreKitStatus === COREKIT_STATUS.LOGGED_IN ? loggedInView : unloggedInView}
-

+

Console will appear here!

);