From edb019756abd5bb1652479e5d7c8d00ad9f2e94f Mon Sep 17 00:00:00 2001 From: iamacook Date: Sat, 4 Nov 2023 09:15:02 +0000 Subject: [PATCH 1/2] fix: update `@web3auth/*` versions --- safe-core-sdk/auth-kit/guides/web3auth.md | 121 ++++++++++++---------- 1 file changed, 64 insertions(+), 57 deletions(-) diff --git a/safe-core-sdk/auth-kit/guides/web3auth.md b/safe-core-sdk/auth-kit/guides/web3auth.md index 9d6d9119..baf9e323 100644 --- a/safe-core-sdk/auth-kit/guides/web3auth.md +++ b/safe-core-sdk/auth-kit/guides/web3auth.md @@ -10,7 +10,7 @@ This guide demonstrate how to create an externally-owned account using your emai ### Install dependencies ```bash -npm i @safe-global/auth-kit @web3auth/base@4.3.0 @web3auth/modal@4.3.1 @web3auth/openlogin-adapter@4.3.0 +npm i @safe-global/auth-kit @web3auth/base@4.6.0 @web3auth/modal@4.6.2 @web3auth/openlogin-adapter@4.6.0 ``` ## Create a Web3AuthModalPack instance @@ -20,10 +20,9 @@ We are going to use the provided `Web3AuthModalPack` exported in the `@safe-glob Create an instance of the [Web3AuthModalPack](https://github.com/safe-global/safe-core-sdk/tree/main/packages/auth-kit/src/packs/web3auth/Web3AuthModalPack.ts) using the required `Web3AuthConfig` configuration object. ```typescript -import { Web3AuthModalPack, Web3AuthConfig } from '@safe-global/auth-kit' -import { Web3AuthOptions } from '@web3auth/modal' -import { OpenloginAdapter } from '@web3auth/openlogin-adapter' - +import { Web3AuthModalPack, Web3AuthConfig } from '@safe-global/auth-kit'; +import { Web3AuthOptions } from '@web3auth/modal'; +import { OpenloginAdapter } from '@web3auth/openlogin-adapter'; // https://web3auth.io/docs/sdk/pnp/web/modal/initialize#arguments const options: Web3AuthOptions = { @@ -33,47 +32,51 @@ const options: Web3AuthOptions = { chainNamespace: CHAIN_NAMESPACES.EIP155, chainId: '0x5', // https://chainlist.org/ - rpcTarget: 'https://rpc.ankr.com/eth_goerli' + rpcTarget: 'https://rpc.ankr.com/eth_goerli', }, uiConfig: { theme: 'dark', - loginMethodsOrder: ['google', 'facebook'] - } -} + loginMethodsOrder: ['google', 'facebook'], + }, +}; // https://web3auth.io/docs/sdk/pnp/web/modal/initialize#configuring-adapters const modalConfig = { [WALLET_ADAPTERS.TORUS_EVM]: { label: 'torus', - showOnModal: false + showOnModal: false, }, [WALLET_ADAPTERS.METAMASK]: { label: 'metamask', showOnDesktop: true, - showOnMobile: false - } -} + showOnMobile: false, + }, +}; // https://web3auth.io/docs/sdk/pnp/web/modal/whitelabel#whitelabeling-while-modal-initialization const openloginAdapter = new OpenloginAdapter({ loginSettings: { - mfaLevel: 'mandatory' + mfaLevel: 'mandatory', }, adapterSettings: { uxMode: 'popup', whiteLabel: { - name: 'Safe' - } - } -}) + name: 'Safe', + }, + }, +}); const web3AuthConfig: Web3AuthConfig = { - txServiceUrl: 'https://safe-transaction-goerli.safe.global' -} + txServiceUrl: 'https://safe-transaction-goerli.safe.global', +}; // Instantiate and initialize the pack -const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig) -await web3AuthModalPack.init({ options, adapters: [openloginAdapter], modalConfig }) +const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig); +await web3AuthModalPack.init({ + options, + adapters: [openloginAdapter], + modalConfig, +}); ``` ## Sign in to an Ethereum account @@ -82,14 +85,14 @@ Once your `Web3AuthModalPack` instance is created, use the `signIn()` method to Important considerations about Web3Auth are: -1) When you sign in with the same social account, the same Ethereum address will be returned for the same Web3Auth client ID. Web3Auth [scopes the creation of the wallet](https://web3auth.io/docs/troubleshooting/different-wallet-address-issue) (address) to the DApp, so when interacting with other DApps using Web3Auth, a different Ethereum address will be returned. This is by design and to enhanced security. +1. When you sign in with the same social account, the same Ethereum address will be returned for the same Web3Auth client ID. Web3Auth [scopes the creation of the wallet](https://web3auth.io/docs/troubleshooting/different-wallet-address-issue) (address) to the DApp, so when interacting with other DApps using Web3Auth, a different Ethereum address will be returned. This is by design and to enhanced security. -2) If you sign in with an email and then with a social account using the same email (e.g. "Sign in with Google"), a different Ethereum address might be returned even the same email address is used. +2. If you sign in with an email and then with a social account using the same email (e.g. "Sign in with Google"), a different Ethereum address might be returned even the same email address is used. ```typescript // The signIn() method will return the user's Ethereum address // The await will last until the user is authenticated, so while the UI modal is showed -const authKitSignData = await web3AuthModalPack.signIn() +const authKitSignData = await web3AuthModalPack.signIn(); ``` The returned `authKitSignData` data contains the following props: @@ -104,35 +107,35 @@ AuthKitSignInData { The `signOut()` method removes the current session. ```typescript -await web3AuthModalPack.signOut() +await web3AuthModalPack.signOut(); ``` Call `getProvider()` to get the Ethereum provider instance. ```typescript -web3AuthModalPack.getProvider() +web3AuthModalPack.getProvider(); ``` We expose two methods for listening to events, `subscribe()` and `unsubscribe()`. In the `Web3AuthModalPack` case, we can listen to all the events listed [here](https://web3auth.io/docs/sdk/pnp/web/modal/initialize#subscribing-the-lifecycle-events). ```typescript -import { ADAPTER_EVENTS } from '@web3auth/base' +import { ADAPTER_EVENTS } from '@web3auth/base'; web3AuthModalPack.subscribe(ADAPTER_EVENTS.CONNECTED, () => { - console.log('User is authenticated') -}) + console.log('User is authenticated'); +}); web3AuthModalPack.subscribe(ADAPTER_EVENTS.DISCONNECTED, () => { - console.log('User is not authenticated') -}) + console.log('User is not authenticated'); +}); ``` When `txServiceUrl` is provided in the `Web3AuthModalPack` instantiation, the list of associated Safe addresses will be returned as part of the `signIn()` method response. ```typescript const web3AuthModalPack = new Web3AuthModalPack({ - txServiceUrl: 'https://safe-transaction-goerli.safe.global' -}) + txServiceUrl: 'https://safe-transaction-goerli.safe.global', +}); ``` ## Signing transactions using the Web3AuthModalPack and Protocol Kit @@ -142,30 +145,32 @@ The `Web3AuthModalPack` can be combined with the [Protocol Kit](../protocol-kit/ Once connected, you can use any of the methods available in the [Protocol Kit](https://github.com/safe-global/safe-core-sdk/tree/main/packages/protocol-kit#sdk-api). ```typescript -import { ethers } from 'ethers' -import { EthersAdapter } from '@safe-global/protocol-kit' +import { ethers } from 'ethers'; +import { EthersAdapter } from '@safe-global/protocol-kit'; -provider = new ethers.providers.Web3Provider(web3AuthModalPack.getProvider()) -signer = provider.getSigner() +provider = new ethers.providers.Web3Provider(web3AuthModalPack.getProvider()); +signer = provider.getSigner(); const ethAdapter = new EthersAdapter({ ethers, - signerOrProvider: signer || provider -}) + signerOrProvider: signer || provider, +}); const safeSDK = await Safe.create({ ethAdapter, - safeAddress -}) + safeAddress, +}); // Create a Safe transaction with the provided parameters const safeTransactionData: MetaTransactionData = { to: '0x', data: '0x', - value: ethers.utils.parseUnits('0.0001', 'ether').toString() -} + value: ethers.utils.parseUnits('0.0001', 'ether').toString(), +}; -const safeTransaction = await safeSDK.createTransaction({ safeTransactionData }) +const safeTransaction = await safeSDK.createTransaction({ + safeTransactionData, +}); ``` ## Sign messages using the `Web3AuthModalPack` @@ -174,21 +179,23 @@ You can also sign any arbitrary message or transaction as a regular Signing Acco ```typescript // Using web3 -const web3 = new Web3(web3AuthModalPack.getProvider()) +const web3 = new Web3(web3AuthModalPack.getProvider()); -await web3.eth.sendTransaction(tx) -await web3.eth.signTransaction(tx) -const message = 'hello world' -const address = '0x...' -await web3.eth.personal.sign(message, address) +await web3.eth.sendTransaction(tx); +await web3.eth.signTransaction(tx); +const message = 'hello world'; +const address = '0x...'; +await web3.eth.personal.sign(message, address); // Using ethers -const provider = new ethers.providers.Web3Provider(web3AuthModalPack.getProvider()) -const signer = provider.getSigner() - -await signer.sendTransaction(tx) -await signer.signTransaction(tx) -await signer.signMessage(message) +const provider = new ethers.providers.Web3Provider( + web3AuthModalPack.getProvider() +); +const signer = provider.getSigner(); + +await signer.sendTransaction(tx); +await signer.signTransaction(tx); +await signer.signMessage(message); ``` ## Alternative example in `@safe-global/safe-core-sdk` From b14f30b74c92fb7fc45356eccd6c595b5d4107c3 Mon Sep 17 00:00:00 2001 From: iamacook Date: Sat, 4 Nov 2023 09:24:58 +0000 Subject: [PATCH 2/2] fix: revert formatting --- safe-core-sdk/auth-kit/guides/web3auth.md | 119 ++++++++++------------ 1 file changed, 56 insertions(+), 63 deletions(-) diff --git a/safe-core-sdk/auth-kit/guides/web3auth.md b/safe-core-sdk/auth-kit/guides/web3auth.md index baf9e323..e68cb14d 100644 --- a/safe-core-sdk/auth-kit/guides/web3auth.md +++ b/safe-core-sdk/auth-kit/guides/web3auth.md @@ -20,9 +20,10 @@ We are going to use the provided `Web3AuthModalPack` exported in the `@safe-glob Create an instance of the [Web3AuthModalPack](https://github.com/safe-global/safe-core-sdk/tree/main/packages/auth-kit/src/packs/web3auth/Web3AuthModalPack.ts) using the required `Web3AuthConfig` configuration object. ```typescript -import { Web3AuthModalPack, Web3AuthConfig } from '@safe-global/auth-kit'; -import { Web3AuthOptions } from '@web3auth/modal'; -import { OpenloginAdapter } from '@web3auth/openlogin-adapter'; +import { Web3AuthModalPack, Web3AuthConfig } from '@safe-global/auth-kit' +import { Web3AuthOptions } from '@web3auth/modal' +import { OpenloginAdapter } from '@web3auth/openlogin-adapter' + // https://web3auth.io/docs/sdk/pnp/web/modal/initialize#arguments const options: Web3AuthOptions = { @@ -32,51 +33,47 @@ const options: Web3AuthOptions = { chainNamespace: CHAIN_NAMESPACES.EIP155, chainId: '0x5', // https://chainlist.org/ - rpcTarget: 'https://rpc.ankr.com/eth_goerli', + rpcTarget: 'https://rpc.ankr.com/eth_goerli' }, uiConfig: { theme: 'dark', - loginMethodsOrder: ['google', 'facebook'], - }, -}; + loginMethodsOrder: ['google', 'facebook'] + } +} // https://web3auth.io/docs/sdk/pnp/web/modal/initialize#configuring-adapters const modalConfig = { [WALLET_ADAPTERS.TORUS_EVM]: { label: 'torus', - showOnModal: false, + showOnModal: false }, [WALLET_ADAPTERS.METAMASK]: { label: 'metamask', showOnDesktop: true, - showOnMobile: false, - }, -}; + showOnMobile: false + } +} // https://web3auth.io/docs/sdk/pnp/web/modal/whitelabel#whitelabeling-while-modal-initialization const openloginAdapter = new OpenloginAdapter({ loginSettings: { - mfaLevel: 'mandatory', + mfaLevel: 'mandatory' }, adapterSettings: { uxMode: 'popup', whiteLabel: { - name: 'Safe', - }, - }, -}); + name: 'Safe' + } + } +}) const web3AuthConfig: Web3AuthConfig = { - txServiceUrl: 'https://safe-transaction-goerli.safe.global', -}; + txServiceUrl: 'https://safe-transaction-goerli.safe.global' +} // Instantiate and initialize the pack -const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig); -await web3AuthModalPack.init({ - options, - adapters: [openloginAdapter], - modalConfig, -}); +const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig) +await web3AuthModalPack.init({ options, adapters: [openloginAdapter], modalConfig }) ``` ## Sign in to an Ethereum account @@ -85,14 +82,14 @@ Once your `Web3AuthModalPack` instance is created, use the `signIn()` method to Important considerations about Web3Auth are: -1. When you sign in with the same social account, the same Ethereum address will be returned for the same Web3Auth client ID. Web3Auth [scopes the creation of the wallet](https://web3auth.io/docs/troubleshooting/different-wallet-address-issue) (address) to the DApp, so when interacting with other DApps using Web3Auth, a different Ethereum address will be returned. This is by design and to enhanced security. +1) When you sign in with the same social account, the same Ethereum address will be returned for the same Web3Auth client ID. Web3Auth [scopes the creation of the wallet](https://web3auth.io/docs/troubleshooting/different-wallet-address-issue) (address) to the DApp, so when interacting with other DApps using Web3Auth, a different Ethereum address will be returned. This is by design and to enhanced security. -2. If you sign in with an email and then with a social account using the same email (e.g. "Sign in with Google"), a different Ethereum address might be returned even the same email address is used. +2) If you sign in with an email and then with a social account using the same email (e.g. "Sign in with Google"), a different Ethereum address might be returned even the same email address is used. ```typescript // The signIn() method will return the user's Ethereum address // The await will last until the user is authenticated, so while the UI modal is showed -const authKitSignData = await web3AuthModalPack.signIn(); +const authKitSignData = await web3AuthModalPack.signIn() ``` The returned `authKitSignData` data contains the following props: @@ -107,35 +104,35 @@ AuthKitSignInData { The `signOut()` method removes the current session. ```typescript -await web3AuthModalPack.signOut(); +await web3AuthModalPack.signOut() ``` Call `getProvider()` to get the Ethereum provider instance. ```typescript -web3AuthModalPack.getProvider(); +web3AuthModalPack.getProvider() ``` We expose two methods for listening to events, `subscribe()` and `unsubscribe()`. In the `Web3AuthModalPack` case, we can listen to all the events listed [here](https://web3auth.io/docs/sdk/pnp/web/modal/initialize#subscribing-the-lifecycle-events). ```typescript -import { ADAPTER_EVENTS } from '@web3auth/base'; +import { ADAPTER_EVENTS } from '@web3auth/base' web3AuthModalPack.subscribe(ADAPTER_EVENTS.CONNECTED, () => { - console.log('User is authenticated'); -}); + console.log('User is authenticated') +}) web3AuthModalPack.subscribe(ADAPTER_EVENTS.DISCONNECTED, () => { - console.log('User is not authenticated'); -}); + console.log('User is not authenticated') +}) ``` When `txServiceUrl` is provided in the `Web3AuthModalPack` instantiation, the list of associated Safe addresses will be returned as part of the `signIn()` method response. ```typescript const web3AuthModalPack = new Web3AuthModalPack({ - txServiceUrl: 'https://safe-transaction-goerli.safe.global', -}); + txServiceUrl: 'https://safe-transaction-goerli.safe.global' +}) ``` ## Signing transactions using the Web3AuthModalPack and Protocol Kit @@ -145,32 +142,30 @@ The `Web3AuthModalPack` can be combined with the [Protocol Kit](../protocol-kit/ Once connected, you can use any of the methods available in the [Protocol Kit](https://github.com/safe-global/safe-core-sdk/tree/main/packages/protocol-kit#sdk-api). ```typescript -import { ethers } from 'ethers'; -import { EthersAdapter } from '@safe-global/protocol-kit'; +import { ethers } from 'ethers' +import { EthersAdapter } from '@safe-global/protocol-kit' -provider = new ethers.providers.Web3Provider(web3AuthModalPack.getProvider()); -signer = provider.getSigner(); +provider = new ethers.providers.Web3Provider(web3AuthModalPack.getProvider()) +signer = provider.getSigner() const ethAdapter = new EthersAdapter({ ethers, - signerOrProvider: signer || provider, -}); + signerOrProvider: signer || provider +}) const safeSDK = await Safe.create({ ethAdapter, - safeAddress, -}); + safeAddress +}) // Create a Safe transaction with the provided parameters const safeTransactionData: MetaTransactionData = { to: '0x', data: '0x', - value: ethers.utils.parseUnits('0.0001', 'ether').toString(), -}; + value: ethers.utils.parseUnits('0.0001', 'ether').toString() +} -const safeTransaction = await safeSDK.createTransaction({ - safeTransactionData, -}); +const safeTransaction = await safeSDK.createTransaction({ safeTransactionData }) ``` ## Sign messages using the `Web3AuthModalPack` @@ -179,23 +174,21 @@ You can also sign any arbitrary message or transaction as a regular Signing Acco ```typescript // Using web3 -const web3 = new Web3(web3AuthModalPack.getProvider()); +const web3 = new Web3(web3AuthModalPack.getProvider()) -await web3.eth.sendTransaction(tx); -await web3.eth.signTransaction(tx); -const message = 'hello world'; -const address = '0x...'; -await web3.eth.personal.sign(message, address); +await web3.eth.sendTransaction(tx) +await web3.eth.signTransaction(tx) +const message = 'hello world' +const address = '0x...' +await web3.eth.personal.sign(message, address) // Using ethers -const provider = new ethers.providers.Web3Provider( - web3AuthModalPack.getProvider() -); -const signer = provider.getSigner(); - -await signer.sendTransaction(tx); -await signer.signTransaction(tx); -await signer.signMessage(message); +const provider = new ethers.providers.Web3Provider(web3AuthModalPack.getProvider()) +const signer = provider.getSigner() + +await signer.sendTransaction(tx) +await signer.signTransaction(tx) +await signer.signMessage(message) ``` ## Alternative example in `@safe-global/safe-core-sdk`