From 8551a1f517a9d7eb39f03c2248fc4b8d351a3e1f Mon Sep 17 00:00:00 2001 From: Alfreedom <00tango.bromine@icloud.com> Date: Mon, 14 Oct 2024 11:14:21 +0200 Subject: [PATCH 1/3] Update flutter doc to include social options --- docs/appkit/flutter/core/installation.mdx | 25 ------------ docs/appkit/flutter/core/options.mdx | 25 ++++++++---- docs/appkit/flutter/core/usage.mdx | 42 +++++++++++++------- docs/appkit/flutter/onboarding/email.mdx | 47 ++++++++++++++++++----- sidebars.js | 6 ++- 5 files changed, 88 insertions(+), 57 deletions(-) diff --git a/docs/appkit/flutter/core/installation.mdx b/docs/appkit/flutter/core/installation.mdx index 17772a15..8c68cdae 100644 --- a/docs/appkit/flutter/core/installation.mdx +++ b/docs/appkit/flutter/core/installation.mdx @@ -171,31 +171,6 @@ Example: -:::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. diff --git a/docs/appkit/flutter/core/options.mdx b/docs/appkit/flutter/core/options.mdx index 4fc85cb1..64ae1847 100644 --- a/docs/appkit/flutter/core/options.mdx +++ b/docs/appkit/flutter/core/options.mdx @@ -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 @@ -24,15 +29,19 @@ 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. @@ -40,7 +49,7 @@ However, if you would want to override that definition with your own, these are 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. @@ -52,7 +61,7 @@ final Set 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. @@ -64,7 +73,7 @@ final Set includedWalletIds = { } ``` -## excludedWalletIds +### excludedWalletIds: Similar to `includedWalletIds` this option allows you to exclude a list of wallets from the API response. diff --git a/docs/appkit/flutter/core/usage.mdx b/docs/appkit/flutter/core/usage.mdx index 32c4fea9..c3e4c61c 100644 --- a/docs/appkit/flutter/core/usage.mdx +++ b/docs/appkit/flutter/core/usage.mdx @@ -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( @@ -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: @@ -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()); ``` \ No newline at end of file diff --git a/docs/appkit/flutter/onboarding/email.mdx b/docs/appkit/flutter/onboarding/email.mdx index cac00bdc..77417a6e 100644 --- a/docs/appkit/flutter/onboarding/email.mdx +++ b/docs/appkit/flutter/onboarding/email.mdx @@ -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( @@ -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`_** : 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. diff --git a/sidebars.js b/sidebars.js index 63603187..334ba72c 100644 --- a/sidebars.js +++ b/sidebars.js @@ -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', @@ -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', From f3b47101f03936f28e7d20c7d9dfe4af3a87271c Mon Sep 17 00:00:00 2001 From: Alfreedom <00tango.bromine@icloud.com> Date: Mon, 14 Oct 2024 14:12:11 +0200 Subject: [PATCH 2/3] Update docs/appkit/flutter/onboarding/email.mdx Co-authored-by: Tomas Rawski --- docs/appkit/flutter/onboarding/email.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/appkit/flutter/onboarding/email.mdx b/docs/appkit/flutter/onboarding/email.mdx index 77417a6e..1a335af3 100644 --- a/docs/appkit/flutter/onboarding/email.mdx +++ b/docs/appkit/flutter/onboarding/email.mdx @@ -50,7 +50,7 @@ final _appKitModal = ReownAppKitModal( ## Options -- **_email: `bool`_** : This boolean defines whether you want to enable email login. Default `true` +- **_email `bool`_** : This boolean defines whether you want to enable email login. Default `true` - **_socials: `List`_** : 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`. From 2bf4676fdfe226ea2c86d8df08373b43a5884559 Mon Sep 17 00:00:00 2001 From: Alfreedom <00tango.bromine@icloud.com> Date: Mon, 14 Oct 2024 14:12:17 +0200 Subject: [PATCH 3/3] Update docs/appkit/flutter/onboarding/email.mdx Co-authored-by: Tomas Rawski --- docs/appkit/flutter/onboarding/email.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/appkit/flutter/onboarding/email.mdx b/docs/appkit/flutter/onboarding/email.mdx index 1a335af3..23338d7f 100644 --- a/docs/appkit/flutter/onboarding/email.mdx +++ b/docs/appkit/flutter/onboarding/email.mdx @@ -51,7 +51,7 @@ final _appKitModal = ReownAppKitModal( ## Options - **_email `bool`_** : This boolean defines whether you want to enable email login. Default `true` -- **_socials: `List`_** : 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. +- **_socials `List`_** : 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`. :::note