Skip to content

Commit

Permalink
Update flutter doc to include social options
Browse files Browse the repository at this point in the history
  • Loading branch information
quetool committed Oct 14, 2024
1 parent a95cce3 commit 8551a1f
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 57 deletions.
25 changes: 0 additions & 25 deletions docs/appkit/flutter/core/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -171,31 +171,6 @@ Example:
</PlatformTabs>


:::info note

If you encounter issue related to `coinbase_wallet_sdk` in regards of _AGP 8.x Compatibility_, please override `coinbase_wallet_sdk` dependency in you pubspec.yaml file as follows:

```javascript
environment:
...

dependencies:
...

dependency_overrides:
coinbase_wallet_sdk:
git:
url: https://github.com/WalletConnect/wallet-mobile-sdk.git
path: flutter
ref: beba5b377e32554f5c00ee08c4df509d9078dbf1

dev_dependencies:
...

```
:::


### Disable Coinbase Wallet

Coinbase Wallet is enabled by default even if, in order to function properly, a few steps has to be done as described in the previous section. However, if you don't want to include/support Coinbase Wallet on your app you just need to pass Coinbase Wallet id `fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa` to [excludedWalletIds](./options#excludedwalletids) options Array.
Expand Down
25 changes: 17 additions & 8 deletions docs/appkit/flutter/core/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ final _appKitModal = ReownAppKitModal(
),
),
// enableAnalytics: true, // OPTIONAL - null by default
// enableEmail: true, // OPTIONAL - false by default
// siweConfig: SIWEConfig(...), // OPTIONAL - null by default
// featuresConfig: FeaturesConfig(
// email: true, // OPTIONAL - false by default
// socials: [...], // OPTIONAL - empty by default
// showMainWallets: true, // OPTIONAL - true by default
// ),
// requiredNamespaces: {}, OPTIONAL - null by default
// optionalNamespaces: {}, OPTIONAL - null by default
// featuredWalletIds: {}, OPTIONAL - null by default
Expand All @@ -24,23 +29,27 @@ final _appKitModal = ReownAppKitModal(
);
```

## enableAnalytics
### enableAnalytics:

Enable analytics to get more insights on your users activity within your [Reown Cloud's dashboard](https://cloud.reown.com)

## enableEmail
### siweConfig:

Used to enable/disable [Email Wallets](../onboarding/email.mdx) feature.
Used to configure [One-Click Auth + SIWE](./siwe.mdx) feature.

## requiredNamespaces and optionalNamespaces
### featuresConfig:

Used to configure extra features such as Analytics, [Email and Social Login](../onboarding/email.mdx).

### requiredNamespaces: and optionalNamespaces:

These values are optionals and, in most cases, not required since AppKit already defines every required and optional namespace internally based on configured networks.

However, if you would want to override that definition with your own, these are the object yout should use.

These are the set of namespaces that will be requested to the wallet you are connecting to.

## featuredWalletIds
### featuredWalletIds:

Allows to override default recommended wallets that are fetched from the API. You can define an array of wallet ids you'd like to prioritize (order is respected). You can get these ids from the [Reown Explorer](https://reown.com/explorer?type=wallet) by clicking on the copy icon of desired wallet card.

Expand All @@ -52,7 +61,7 @@ final Set<String> featuredWalletIds = {
}
```

## includedWalletIds
### includedWalletIds:

Similar to `featuredWalletIds` this option allows you to determine exactly which wallets do you want to show. If `includedWalletIds` is set then only the wallets listed in this object are going to be displayed in the modal.

Expand All @@ -64,7 +73,7 @@ final Set<String> includedWalletIds = {
}
```

## excludedWalletIds
### excludedWalletIds:

Similar to `includedWalletIds` this option allows you to exclude a list of wallets from the API response.

Expand Down
42 changes: 29 additions & 13 deletions docs/appkit/flutter/core/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ The `metadata` object should contain your dApp's name, description, url and icon

## Redirect to your dApp

The service's metadata object contains a `redirect` option that serves to the purpose of redirecting back to your dapp from the connected wallet.
AppKit's metadata object contains a `redirect` option that should be used by the wallet to redirected back to your dapp after connection.

```javascript
redirect: Redirect(
Expand Down Expand Up @@ -137,27 +137,29 @@ But in order for the redirect mechanism to work you would also need to add the f

## Connection Buttons

You can use the `AppKitModalConnectButton`, which will open the AppKit modal with no prior network selected
`AppKitModalConnectButton` to open modal and connect to a wallet or through social options

```javascript
AppKitModalConnectButton(appKit: _appKitModal)
```

Or you can use `AppKitModalNetworkSelectButton` which will first show a network selection prompt:
`AppKitModalNetworkSelectButton` to select an available network

```javascript
AppKitModalNetworkSelectButton(appKit: _appKitModal)
```

Once session is approved you can use `AppKitModalAccountButton` widget to show basic account data and to open Account data modal:
`AppKitModalAccountButton` to open account screen once connected

```javascript
AppKitModalAccountButton(appKit: _appKitModal)
```

To connect to a wallet you can either use `AppKitModalNetworkSelectButton`, `AppKitModalConnectButton`. `AppKitModalNetworkSelectButton` will allow the user to pre-select a Network before connecting while `AppKitModalConnectButton` will directly show available wallets.
To connect to a wallet you can either use `AppKitModalConnectButton` or `AppKitModalNetworkSelectButton`.

Once connected, `AppKitModalConnectButton` will serve as Disconnect button while `AppKitModalAccountButton` will show basic account data such as balance and address and will we used to open Account screen.
`AppKitModalNetworkSelectButton` will allow the user to pre-select a Network before connecting while `AppKitModalConnectButton` will directly show available wallets and social options.

Once connected, `AppKitModalConnectButton` will serve as Disconnect button while `AppKitModalAccountButton` will show basic account data such as balance and address and will be used to open Account screen.

Quick example:

Expand All @@ -175,33 +177,47 @@ Column(
),
```

`AppKitModalAccountButton` is composed by `AppKitModalBalanceButton` and `AppKitModalAddressButton` and you can use these separatedly from `AppKitModalAccountButton`

```javascript
AppKitModalBalanceButton(appKitModal: _appKitModal, onTap: _appKitModal.openModalView);

AppKitModalAddressButton(appKitModal: _appKitModal, onTap: _appKitModal.openModalView);
```

## Custom Buttons

If you like you can also override AppKit's button style by using the `custom:` property as follows
If you like you can also override AppKit's buttons by using the `custom:` property as follows

```javascript
AppKitModalConnectButton(
appKit: _appKitModal,
custom: ElevatedButton(
/* highlight-add-start */
custom: MyCustomButton(
onPressed: () {
_appKitModal.openModalView();
},
child: const Text('CONNECT WALLET'),
),
/* highlight-add-end */
),
```
`openModalView` method can accept a "startWidget" argument that you can leverage to open specifics screens of the modal:
`openModalView()` method can accept a "startWidget" argument that you can leverage to open specifics screens of the modal:
```javascript
// With no options will open default screen depending on the connection status
_appKitModal.openModalView();

// Will open Network Selection screen independently of the connection status
// This option is not needed if you use AppKitModalNetworkSelectButton()
_appKitModal.openModalView(ReownAppKitModalSelectNetworkPage());

// Will open QR Code screen for connection.
// Will work only if not yet connected.
_appKitModal.openModalView(ReownAppKitModalQRCodePage());

// Will open Network Selection screen
_appKitModal.openModalView(ReownAppKitModalSelectNetworkPage());
// Will open All Wallets screen for selecting.
// Will open All Wallets screen for connection
// Will work only if not yet connected.
_appKitModal.openModalView(ReownAppKitModalAllWalletsPage());
```
47 changes: 38 additions & 9 deletions docs/appkit/flutter/onboarding/email.mdx
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
import PlatformTabs from '../../../components/PlatformTabs'
import PlatformTabItem from '../../../components/PlatformTabItem'

# Email Wallets
# Email & Social Wallets

AppKit enables passwordless Web3 onboarding and authentication, allowing your users interact with your application by creating a non-custodial wallet with just their emails.
AppKit enables passwordless Web3 onboarding and authentication, allowing your users interact with your application by creating a non-custodial wallet with just their emails or social accounts.

:::caution important

Remember to whitelist your dapp's iOS's bundleId and Android's packageName in your cloud configuration.

1. LogIn into https://cloud.reown.com
2. Open Dashboard and scroll down to _Mobile Application IDs_ menu
3. Add your iOS Bundle ID and your Android Package Name

:::

## Integration

In order to support Email Wallets creation just set `enableEmail` parameter to `true` in `ReownAppKitModal` initialization.
In order to support Email and Social Wallets creation just set `featuresConfig:` parameter in `ReownAppKitModal` initialization.

```javascript
final _appKitModal = ReownAppKitModal(
Expand All @@ -25,21 +34,41 @@ final _appKitModal = ReownAppKitModal(
),
),
/* highlight-add-start */
enableEmail: true, // OPTIONAL - false by default
featuresConfig: FeaturesConfig(
email: true,
socials: [
AppKitSocialOption.Farcaster,
AppKitSocialOption.X,
AppKitSocialOption.Apple,
AppKitSocialOption.Discord,
],
showMainWallets: false,
),
/* highlight-add-end */
);
```

:::caution note
## Options

Remember to whitelist your dapp's iOS's bundleId and Android's packageName in your cloud configuration.
- **_email: `bool`_** : This boolean defines whether you want to enable email login. Default `true`
- **_socials: `List<AppKitSocialOption>`_** : This list contains the list of social platforms that you want to enable for user authentication. The platforms in the example include Farcaster, X, Discord. Is empty by default, it means that no social options is enabled.
- **showMainWallets `bool`_** : This boolean defines whether you want to show the main wallet options on the first connect screen. If this is `false` it will show a button that directs you to a new screen displaying all avaiable wallets. Default `true`.

1. LogIn into https://cloud.reown.com
2. Open Dashboard and scroll down to _Mobile Application IDs_ menu
3. Add your iOS Bundle ID and your Android Package Name
:::note

In order for Email Wallet to work propertly, `AppKitModalConnectButton()` has to be instantiated during the whole lifetime of the app.

If you already use `AppKitModalConnectButton()` then nothing else has to be done, but in case you don't use it but still want to support Email Wallets you can instantiate and hide it as follows:

```javascript
AppKitModalConnectButton(
appKit: _appKitModal,
custom: SizedBox.shrink(), // Will make the button invisible
),
```
:::


## User Flow

1. Users will be able to connect to you application by simply using an email address. AppKit will send to them a One Time Password (OTP) to copy and paste in the modal, which will help to verify the user's authenticity. This will create a non-custodial wallet for your user which will be available in any application that integrates AppKit and Email Wallets.
Expand Down
6 changes: 4 additions & 2 deletions sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -790,9 +790,9 @@ module.exports = {
items: [
'appkit/flutter/core/installation',
'appkit/flutter/core/usage',
'appkit/flutter/core/options',
'appkit/flutter/core/siwe',
'appkit/flutter/core/link-mode',
'appkit/flutter/core/options',
'appkit/flutter/core/actions',
'appkit/flutter/core/events',
'appkit/flutter/core/theming',
Expand All @@ -802,7 +802,9 @@ module.exports = {
{
type: 'category',
label: 'Onboarding',
items: ['appkit/flutter/onboarding/email']
items: [
{ type: 'doc', label: 'Email & Socials', id: 'appkit/flutter/onboarding/email' },
]
},
{
type: 'category',
Expand Down

0 comments on commit 8551a1f

Please sign in to comment.