Skip to content

Commit 9a31428

Browse files
add migration guide for Flutter
1 parent 19cd28f commit 9a31428

2 files changed

Lines changed: 179 additions & 0 deletions

File tree

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: PnP Flutter SDK - v3 to v4
3+
displayed_sidebar: sdk
4+
description: "PnP Flutter SDK - v3 to v4 | Documentation - Web3Auth"
5+
sidebar_label: v3 to v4
6+
---
7+
8+
import TabItem from "@theme/TabItem";
9+
import Tabs from "@theme/Tabs";
10+
import SMSPasswordless from "@site/src/common/sdk/pnp/flutter/_sms_passwordless.mdx";
11+
12+
# Migration Guide from v3 to v4 for Web3Auth PnP Flutter SDK
13+
14+
## Overview
15+
16+
This migration guide provides steps for upgrading from version 3(v3) to version 4(v4) of the
17+
Web3Auth PnP Flutter SDK. The guide outlines significant changes and enhancements, including the
18+
introduction of `enableMFA` method to initiate MFA setup flow, `request` method for transaction
19+
confirmation screens, `launchWalletServices` method for template wallet interface, updates to the
20+
`Provider` and the `TypeOfLogin` enum.
21+
22+
## Changes in Detail
23+
24+
### `setResultUrl` is now removed
25+
26+
With the new v4 update, there's a breaking change with the removal of the `setResultUrl` method,
27+
which was used to trigger the user `UserCancelledException` on Android.
28+
29+
From v4, developers won't be able to use the `setResultUrl` method.
30+
31+
### `enableMFA` method
32+
33+
From v4, developers can now use the `enableMFA` method to initiate MFA setup flow for already logged
34+
in users.
35+
36+
<Tabs
37+
defaultValue="default-verifier"
38+
values={[
39+
{ label: "Default Verifier", value: "default-verifier" },
40+
{ label: "Custom JWT Verifier", value: "custom-jwt-verifier" },
41+
]}
42+
>
43+
44+
<TabItem value="default-verifier">
45+
```dart title="Usage"
46+
try {
47+
// highlight-next-line
48+
await Web3AuthFlutter.enableMFA();
49+
} on UserCancelledException {
50+
log("User cancelled.");
51+
} catch(e) {
52+
log("Unknown exception occurred");
53+
}
54+
```
55+
</TabItem>
56+
57+
<TabItem value="custom-jwt-verifier">
58+
```dart title="Usage"
59+
try {
60+
final loginParams = LoginParams(
61+
loginProvider: Provider.jwt,
62+
extraLoginOptions: ExtraLoginOptions(
63+
id_token: "YOUR_JWT_TOKEN",
64+
),
65+
);
66+
67+
// highlight-next-line
68+
await Web3AuthFlutter.enableMFA(loginParams);
69+
70+
} on UserCancelledException { log("User cancelled."); } catch(e) { log("Unknown exceptionoccurred");
71+
}
72+
73+
````
74+
</TabItem>
75+
</Tabs>
76+
77+
### `launchWalletServices` method
78+
79+
From v4, developers can use the `launchWalletServices` to launches a WebView which allows them to use the templated wallet UI
80+
services. Developers can pass the `ChainConfig` to launch wallet services with a specific chain selected.
81+
82+
:::note Minimum Scale plan required
83+
84+
Access to Wallet Services is gated. You can use this feature in the development environment for
85+
free. The minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a
86+
production environment is the **Scale Plan**.
87+
88+
:::
89+
90+
#### ChainConfig Arguments
91+
92+
| Parameter | Description |
93+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
94+
| `chainNamespace` | Custom configuration for your preferred blockchain. As of now only EVM supported. Default value is `ChainNamespace.eip155`. |
95+
| `decimals?` | Number of decimals for the currency ticker. Default value is 18, and accepts `int` as value. |
96+
| `blockExplorerUrl?` | Blockchain's explorer URL. (eg: `https://etherscan.io`) |
97+
| `chainId` | The chain id of the selected blockchain in hex `String`. |
98+
| `displayName?` | Display Name for the chain. |
99+
| `logo?` | Logo for the selected `chainNamespace` & `chainId`. |
100+
| `rpcTarget` | RPC Target URL for the selected `chainNamespace` & `chainId`. |
101+
| `ticker?` | Default currency ticker of the network (e.g: `ETH`) |
102+
| `tickerName?` | Name for currency ticker (e.g: `Ethereum`) |
103+
104+
#### Usage
105+
106+
```dart title="Usage"
107+
try {
108+
// highlight-start
109+
await Web3AuthFlutter.launchWalletServices(
110+
ChainConfig(
111+
chainId: "0x1",
112+
rpcTarget: "https://mainnet.infura.io/v3/$key",
113+
),
114+
);
115+
// highlight-end
116+
} on UserCancelledException {
117+
log("User cancelled.");
118+
} catch(e) {
119+
log("Unknown exception occurred");
120+
}
121+
````
122+
123+
### `request` method
124+
125+
Now, developers can use the `request` method to use the templated transaction confirmation screens
126+
for signing transactions. To retrive the signature for the request, developers can use the
127+
`getSignResponse` static method.
128+
129+
```dart title="Usage"
130+
try {
131+
List<dynamic> params = [];
132+
// Message to be signed
133+
params.add("Hello, Web3Auth from Flutter!");
134+
// User's EOA address
135+
params.add("<User Address in Hex>");
136+
137+
// highlight-start
138+
await Web3AuthFlutter.request(
139+
ChainConfig(
140+
chainId: "0x1",
141+
rpcTarget: "https://mainnet.infura.io/v3/$key",
142+
),
143+
"personal_sign",
144+
params,
145+
);
146+
// highlight-end
147+
} on UserCancelledException {
148+
log("User cancelled.");
149+
} catch(e) {
150+
log("Unknown exception occurred");
151+
}
152+
153+
// highlight-next-line
154+
final signResponse = await Web3AuthFlutter.getSignResponse();
155+
log(signResponse.toString())
156+
```
157+
158+
### New Login Providers
159+
160+
v4 update brings two new providers. Now developers can use the SMS Passwordless and Farcaster login
161+
options.
162+
163+
#### SMS Passwordless
164+
165+
<SMSPasswordless />
166+
167+
#### Farcaster
168+
169+
```dart title="Usage"
170+
final Web3AuthResponse response = await Web3AuthFlutter.login(
171+
// highlight-next-line
172+
LoginParams(loginProvider: Provider.farcaster)
173+
);
174+
```

sidebars.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -721,6 +721,11 @@ const sidebars: SidebarsConfig = {
721721
label: "Plug and Play React Native SDK",
722722
items: ["migration-guides/rn-v4-to-v5", "migration-guides/rn-v3-to-v4"],
723723
},
724+
{
725+
type: "category",
726+
label: "Plug and Play Flutter SDK",
727+
items: ["migration-guides/flutter-v3-to-v4"],
728+
},
724729
{
725730
type: "category",
726731
label: "Single Factor Auth Flutter SDK",

0 commit comments

Comments
 (0)