Skip to content

Commit 1d16cff

Browse files
alexandratranAyushBherwani1998AyushBherwani1998Halleys123shahbaz17
authored
Add DTK tutorial for creating an invite link (#2289)
* Fix typos Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> * Update react-native.md (#2225) useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> * Add DTK tutorial for creating an invite link * Edit the Angular SDK content. (#2287) Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fix deeplink urls (#2293) * Edit the embedded wallets React builder component. (#2292) * Edit the React builder component. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Typo. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * update tutorial * Add DTK tutorial for creating an invite link * Update react-native.md (#2225) useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> * Edit the Angular SDK content. (#2287) Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fix deeplink urls (#2293) * update tutorial * Edit the embedded wallets React builder component. (#2292) * Edit the React builder component. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Typo. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * add wagmi step and adjust headings * address reviewer comments * address reviewer comments * minor edits --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> Co-authored-by: Ayush Bherwani <ayush.bherwani1998@gmail.com> Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Arnav Chhabra <65032719+Halleys123@users.noreply.github.com> Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> Co-authored-by: Byron Gravenorst <50852695+bgravenorst@users.noreply.github.com>
1 parent 694fe60 commit 1d16cff

File tree

25 files changed

+413
-71
lines changed

25 files changed

+413
-71
lines changed

‎gator-sidebar.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,11 @@ const sidebar = {
116116
label: "Create a custom caveat enforcer",
117117
href: "/tutorials/create-custom-caveat-enforcer"
118118
},
119+
{
120+
type: "link",
121+
label: "Create a social invite link",
122+
href: "/tutorials/create-invite-link"
123+
},
119124
],
120125
},
121126
{

‎sdk/connect/react-native.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,12 +176,12 @@ For example:
176176
import { useSDK } from "@metamask/sdk-react"
177177

178178
function App() {
179-
const { connect, terminate, account, chainId, ethereum } = useSDK()
179+
const { account, chainId, ethereum, sdk } = useSDK()
180180

181181
// Connect to MetaMask
182182
const connectWallet = async () => {
183183
try {
184-
await connect()
184+
await sdk?.connect()
185185
} catch (error) {
186186
console.error("Failed to connect wallet:", error)
187187
}
@@ -196,7 +196,7 @@ function App() {
196196

197197
// Disconnect wallet
198198
const disconnectWallet = async () => {
199-
await terminate()
199+
await sdk?.terminate()
200200
}
201201

202202
return (

‎sdk/guides/use-deeplinks.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ This page highlights deeplinks available for the MetaMask mobile app.
2323
<TabItem value="Deeplink">
2424

2525
```text
26-
https://metamask.app.link/dapp/{dappUrl}
26+
https://link.metamask.io/dapp/{dappUrl}
2727
```
2828

2929
</TabItem>
3030
<TabItem value="Example">
3131

3232
```text
33-
https://metamask.app.link/dapp/app.uniswap.org
33+
https://link.metamask.io/dapp/app.uniswap.org
3434
```
3535

3636
</TabItem>
@@ -51,14 +51,14 @@ The example navigates to `app.uniswap.org` in the in-app browser.
5151
<TabItem value="Deeplink">
5252

5353
```text
54-
https://metamask.app.link/send/{recipient}@{chainId}
54+
https://link.metamask.io/send/{recipient}@{chainId}
5555
```
5656

5757
</TabItem>
5858
<TabItem value="Example">
5959

6060
```text
61-
https://metamask.app.link/send/0x0000000@137?value=1e16
61+
https://link.metamask.io/send/0x0000000@137?value=1e16
6262
```
6363

6464
</TabItem>
@@ -84,14 +84,14 @@ The example displays the confirmation screen to send 0.01 POL (`1e16` wei) in Po
8484
<TabItem value="Deeplink">
8585

8686
```text
87-
https://metamask.app.link/send/{contractAddress}@{chainId}/transfer
87+
https://link.metamask.io/send/{contractAddress}@{chainId}/transfer
8888
```
8989

9090
</TabItem>
9191
<TabItem value="Example">
9292

9393
```text
94-
https://metamask.app.link/send/0x176211869cA2b568f2A7D4EE941E073a821EE1ff@59144/transfer?address=0x0000000&uint256=1e6
94+
https://link.metamask.io/send/0x176211869cA2b568f2A7D4EE941E073a821EE1ff@59144/transfer?address=0x0000000&uint256=1e6
9595
```
9696

9797
</TabItem>
@@ -118,14 +118,14 @@ The example displays the confirmation screen to send 1 USDC (`1e6` units, contra
118118
<TabItem value="Deeplink">
119119

120120
```text
121-
https://metamask.app.link/buy
121+
https://link.metamask.io/buy
122122
```
123123

124124
</TabItem>
125125
<TabItem value="Example">
126126

127127
```text
128-
https://metamask.app.link/buy?chainId=59144&address=0x176211869cA2b568f2A7D4EE941E073a821EE1ff&amount=100
128+
https://link.metamask.io/buy?chainId=59144&address=0x176211869cA2b568f2A7D4EE941E073a821EE1ff&amount=100
129129
```
130130

131131
</TabItem>
@@ -154,14 +154,14 @@ You can use the `/buy` or `/buy-crypto` path for this deeplink.
154154
<TabItem value="Deeplink">
155155

156156
```text
157-
https://metamask.app.link/sell
157+
https://link.metamask.io/sell
158158
```
159159

160160
</TabItem>
161161
<TabItem value="Example">
162162

163163
```text
164-
https://metamask.app.link/sell?chainId=59144&amount=125
164+
https://link.metamask.io/sell?chainId=59144&amount=125
165165
```
166166

167167
</TabItem>

‎src/pages/quickstart/builder/embedded-wallets/angular/stepContent/angularBundlerIssues.mdx‎

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

3-
While using any web3 library in Angular, 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+
Some web3 packages (for example, `eccrypto`) rely on Node.js modules that aren't available in the
4+
browser.
45

5-
To solve this, please have a look at our troubleshooting pages about [Webpack 5 Issues](/troubleshooting/webpack-issues)
6+
To resolve this, see the
7+
[Webpack 5 troubleshooting issues](/embedded-wallets/troubleshooting/webpack-issues#angular) page.

‎src/pages/quickstart/builder/embedded-wallets/angular/stepContent/angularQuickStart.mdx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
### MetaMask Embedded Wallets Angular Quick Start
1+
### MetaMask Embedded Wallets Angular quickstart
22

3-
Integrate secure and seamless Web3 authentication into your Angular app using MetaMask Embedded Wallet SDKs.
3+
Add Web3 authentication to your Angular app with the MetaMask Embedded Wallets SDK.
44

5-
Clone the Angular Quick Start Application
5+
To view a quickstart for a different platform, select the dropdown in the menu bar and choose your
6+
target (for example, Android, React, Flutter, iOS, or others).
7+
8+
Clone the Angular quickstart application:
69

710
```shell
811
npx degit Web3Auth/web3auth-examples/quick-starts/angular-quick-start w3a-quick-start
912
```
1013

11-
:::info
14+
:::info Get help
1215

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).
16+
Visit the [**Web3Auth community**](https://web3auth.io/community/).
1417

1518
:::

‎src/pages/quickstart/builder/embedded-wallets/angular/stepContent/blockchainCalls.mdx‎

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

3-
This example demonstrates the connection for an EVM Chain with Web3Auth. You can choose the library of your choice and configure it according the steps given in the respective RPC Files.
3+
This example shows how to connect to an EVM chain with Web3Auth. Choose your preferred library and
4+
configure it by following the steps in the relevant RPC files.
45

5-
:::tip Other Blockchains
6+
:::tip Connect any blockchain
67

7-
Web3Auth supports all blockchains. Have a look at our [Connect Blockchain](/connect-blockchain/) section of the documentation and choose your blockchain to get started.
8+
Refer to the [blockchain documentation](/embedded-wallets/connect-blockchain/) to learn more about making calls on
9+
any supported blockchain.
810

911
:::

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
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
4+
project settings in the Web3Auth dashboard.
45

56
:::info
67

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

911
:::

‎src/pages/quickstart/builder/embedded-wallets/angular/stepContent/initialize.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
### Initialize Web3Auth
22

3-
Web3Auth's Instance needs to be initialized as soon as your app loads up to enable the user to log in. Preferably done within a constructor.
3+
Initialize the `Web3Auth` instance when your app loads to enable sign-in. We recommend
4+
doing this within a constructor.

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

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

3-
Install the Web3Auth Angular SDK package in your project.
4-
5-
> Additionally, for blockchain calls, this example can run with `viem` or `ethers`, you can choose your preferred library.
3+
Install the SDK package in your project. For blockchain calls, this example can run with `viem` or
4+
`ethers`, you can choose your preferred library.
65

76
```bash npm2yarn
87
npm install --save @web3auth/modal viem

‎src/pages/quickstart/builder/embedded-wallets/angular/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 `connect` function in the Web3Auth Instance to display the modal. The modal will prompt the user to login with their wallet and handle the authentication for you.
3+
Use the [`connect`](/embedded-wallets/sdk/js/usage/connect) function to display the sign-in modal.
4+
The modal prompts the user to sign in with their wallet and handles the authentication.

0 commit comments

Comments
 (0)