Skip to content

Commit b4b38ba

Browse files
bgravenorstbgravenorst
authored
Edit Vue SDK content. (#2498)
* Edit Vue SDK content. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Addressed feedback. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>
1 parent 8fc2621 commit b4b38ba

File tree

9 files changed

+40
-33
lines changed

9 files changed

+40
-33
lines changed

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/config.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
### Configure Web3Auth
22

3-
Create a basic config for Web3Auth and pass the `clientId` & `web3AuthNetwork` from your Web3Auth Dashboard Project Settings.
3+
Create a basic Web3Auth configuration and pass the client ID and network details from your project
4+
settings in the Web3Auth dashboard.
45

56
:::info
6-
7-
This is where you can also configure any major settings of your integration as well. Visit our [**configuration section**](/embedded-wallets/sdk/vue/config) of the sdk reference to learn more about the different options available.
8-
7+
Configure other major settings here as needed.
8+
See the [configuration section](/embedded-wallets/sdk/vue/advanced) for available options.
99
:::

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/installation.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
### Install MetaMask Embedded Wallet SDK
1+
### Install MetaMask Embedded Wallets SDK
22

3-
Install the Web3Auth Vue SDK package in your project.
3+
Install the MetaMask Embedded Wallets SDK (Web3Auth) package in your project.
44

5-
> Additionally, for blockchain calls, we're using `@wagmi/vue` and its dependency, `@tanstack/vue-query` for this example.
5+
Additionally, install `@wagmi/vue` and `@tanstack/vue-query` for blockchain calls.
66

77
```bash npm2yarn
88
npm install --save @web3auth/modal @wagmi/vue @tanstack/vue-query

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/login.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
### Logging in your User
1+
### Sign in the user
22

3-
Use the `useWeb3AuthConnect` composable to get access to the login functionality. The modal will prompt the user to login with their wallet and handle the authentication for you.
3+
Use the `useWeb3AuthConnect` composable to initiate sign-in. The modal guides the user through the
4+
process and completes authentication.

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/logout.mdx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
### Log the user out
1+
### Sign out the user
22

3-
Use the `useWeb3AuthDisconnect` composable to log the user out. This will also delete the session information from the local storage of the browser.
3+
Use the `useWeb3AuthDisconnect` composable to sign out the user. This also clears the session information
4+
from the browser's local storage.
45

56
:::info
67

7-
There are multiple other composables available in the Web3Auth Vue SDK. Visit our [**composables section**](/embedded-wallets/sdk/vue/composables) of the sdk reference to learn more about the different composables available.
8+
The Embedded Wallets Vue SDK provides additional composables.
9+
See the [composables section](/embedded-wallets/sdk/vue/composables) for more information.
810

911
:::

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/setupWagmiProvider.mdx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
### Setup Wagmi Provider
1+
### Set up the Wagmi provider
22

3-
Since we're using `@wagmi/vue` for this example, we need to setup the `WagmiProvider` component. Please use the `WagmiProvider` component from `@web3auth/modal/vue/wagmi` to wrap your application.
3+
Since this example uses `@wagmi/vue`, wrap your app with the `WagmiProvider` component
4+
from `@web3auth/modal/vue/wagmi`.
45

56
```tsx
67
import { WagmiProvider } from '@web3auth/modal/vue/wagmi'
78
```
89

9-
> Apart from that, the standard wagmi setup is being used. You do not need to create any wagmi config, since the Web3Auth config is being used directly. Refer to the [wagmi docs](https://wagmi.sh/vue/getting-started) for more information.
10+
This example uses the standard Wagmi setup. You don't need to create a Wagmi configuration; the Web3Auth
11+
configuration is used directly. See the [Wagmi docs](https://wagmi.sh/vue/getting-started) for more
12+
information.

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/setupWeb3AuthProvider.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
### Setup Web3Auth Provider
1+
### Set up the Web3Auth provider
22

3-
To enable the composables across your application, you need to wrap your application with the `Web3AuthProvider` component. This involves using the configuration created in the previous step.
3+
Wrap your app with `Web3AuthProvider` to enable hooks across your application. Use the configuration
4+
from the previous step.

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/vueBundlerIssues.mdx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
### Fixing Bundler Issues
1+
### Troubleshoot bundler issues
22

3-
While using Web3Auth in Vue, you may run into issues building. This issue occurs because some core packages like `eccrypto` have certain dependencies which are not present within the browser build environment.
3+
You might see build or bundle errors when you use MetaMask Embedded Wallets in Vue.
4+
Some core packages (for example, `eccrypto`) have dependencies that are not present in the
5+
build environment.
46

5-
To solve this, please have a look at our troubleshooting pages for [Vite Issues](/troubleshooting/vite-issues)
7+
Refer to the [troubleshooting section](/embedded-wallets/troubleshooting/vite-issues) for more information.

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/vueQuickStart.mdx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
### MetaMask Embedded Wallets Vue Quick Start
1+
### MetaMask Embedded Wallets Vue quickstart
22

3-
Integrate secure and seamless Web3 authentication into your Vue app using MetaMask Embedded Wallet SDKs.
3+
Integrate secure and seamless Web3 authentication into your Vue app using MetaMask Embedded Wallet SDK (Web3Auth).
44

5-
Clone the Vue Quick Start Application
5+
Clone the quickstart:
66

77
```shell
88
npx degit Web3Auth/web3auth-examples/quick-starts/vue-quick-start w3a-quick-start
99
```
1010

1111
:::info
12-
13-
If you face any problem anytime, you can always find help in the [**Web3Auth Community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
14-
12+
If you need help, visit the [**Web3Auth Community**](https://web3auth.io/community/c/help-pnp/pnp-web/7).
1513
:::

‎src/pages/quickstart/builder/embedded-wallets/vue/stepContent/wagmiCalls.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
### Making Blockchain Calls
1+
### Make blockchain calls
22

3-
Since Wagmi is configured in this application, you can directly use the wagmi composables to make blockchain calls. We have demonstrated some commonly used composables like `useBalance`, `useAccount`, `useSignMessage`, `useSendTransaction` and `useSwitchChain`.
3+
You can use Wagmi composables to make blockchain calls. This example uses `useBalance`, `useAccount`,
4+
`useSignMessage`, `useSendTransaction` and `useSwitchChain`.
45

56
:::info
67

7-
You can refer to the [**wagmi docs**](https://wagmi.sh/vue/api/composables) for more information on the composables.
8+
Refer to the [Wagmi docs](https://wagmi.sh/vue/api/composables) for more information on the composables.
89

910
:::
1011

11-
:::tip Other Blockchains
12-
13-
Web3Auth supports all blockchains. Have a look at our [Connect Blockchain](/connect-blockchain/) section of the documentation and choose your blockchain to get started.
14-
12+
:::tip Connect any blockchain
13+
Refer to the [blockchain documentation](/embedded-wallets/connect-blockchain) to learn more about making calls on
14+
any supported blockchain.
1515
:::

0 commit comments

Comments
 (0)