Merge pull request #7 from WalletConnect/feature/flutter_docs_update

Docs update for flutter

docs/appkit/flutter/core/actions.mdx

@@ -1,73 +1,95 @@
 # Actions
 
+### Listen to balance change
+
+You can subscribe to `_appKitModal.balanceNotifier` to be up to date with balance.
+
+```javascript
+// Example usage:
+ValueListenableBuilder<String>(
+  valueListenable: _appKitModal.balanceNotifier,
+  builder: (_, balance, __) {
+    return Text(balance);
+  },
+),
+
+```
+
 ### Launch the current wallet
 
 If you connected your dApp through deep linkining to a Wallet app you can launch that wallet app with the following:
 
-```dart
-_w3mService.launchConnectedWallet();
+```javascript
+_appKitModal.launchConnectedWallet();
 ```
 
 ### Launch block explorer
 
 You can open the selected chain's block explorer easily:
 
-```dart
-_w3mService.launchBlockExplorer();
+```javascript
+_appKitModal.launchBlockExplorer();
 ```
 
 ### Send an RPC request
 
-```dart
-final result = await _w3mService.request(
-  topic: _w3mService.session?.topic ?? '',
-  chainId: 'eip155:1', // Connected chain id
+```javascript
+final bytes = utf8.encode(message);
+final encodedMessage = hex.encode(bytes);
+
+final result = await _appKitModal.request(
+  topic: _appKitModal.session!.topic,
+  chainId: _appKitModal.selectedChain!.chainId,
   request: SessionRequestParams(
     method: 'personal_sign',
-    params: ['Sign this', '0xdeadbeef'],
+    params: [
+      '0x$encodedMessage',
+      _appKitModal.session!.address!,
+    ],
   ),
 );
 ```
 
-A list of all available methods can be found in [constants.dart](https://github.com/WalletConnect/WalletConnectFlutterV2/blob/master/lib/apis/utils/constants.dart#L70) file, which is already exported for you to use directly from web3modal package.
+A list of all available methods can be found in [constants.dart](https://github.com/reown-com/reown_flutter/blob/master/packages/reown_core/lib/utils/constants.dart#L70) file, which is already exported for you to use directly from AppKit package.
 
 ### List of approved chains by the connected wallet
 
-```dart
-_w3mService.getApprovedChains();
+```javascript
+_appKitModal.getApprovedChains();
 ```
 
 ### List of approved methods by connected wallet
 
-```dart
-_w3mService.getApprovedMethods();
+```javascript
+_appKitModal.getApprovedMethods();
 ```
 
 ### List of approved events by the connected wallet
 
-```dart
-_w3mService.getApprovedEvents();
+```javascript
+_appKitModal.getApprovedEvents();
 ```
 
 ### Interact with Smart Contracts
 
 #### Read function:
 
-```dart
+```javascript
 Future<List<dynamic>> requestReadContract({
+  required String? topic,
+  required String chainId,
   required DeployedContract deployedContract,
   required String functionName,
-  required String rpcUrl,
   EthereumAddress? sender,
-  List<dynamic> parameters = const [],
+  List parameters = const [],
 });
 ```
 
 #### Usage:
 
 1. Create a DeployedContract object
 
-```dart
+```javascript
 // Create DeployedContract object using contract's ABI and address
 final deployedContract = DeployedContract(
   ContractAbi.fromJson(
@@ -80,49 +102,50 @@ final deployedContract = DeployedContract(
 
 2. Read from it by calling a read function
 
-```dart
+```javascript
 Future<void> getWalletBalance() async {
   // Get balance of wallet
-  final result = await _w3mService.requestReadContract(
+  final result = await _appKitModal.requestReadContract(
     deployedContract: deployedContract,
+    topic: _appKitModal.session!.topic,
+    chainId: _appKitModal.selectedChain!.chainId,
     functionName: 'balanceOf',
-    rpcUrl: 'https://{rpc-url}.com',
     parameters: [
-      EthereumAddress.fromHex('0xaddress....'), // Your address
+      EthereumAddress.fromHex(_appKitModal.session!.address!),
     ],
   );
 }
 
 Future<void> getTotalSupply() async {
   // Get token total supply
-  final result = await _w3mService.requestReadContract(
+  final result = await _appKitModal.requestReadContract(
     deployedContract: deployedContract,
-    functionName: 'totalSupply',
-    rpcUrl: 'https://{rpc-url}.com',
+    topic: _appKitModal.session!.topic,
+    chainId: _appKitModal.selectedChain!.chainId,
+    functionName: 'balanceOf',
   );
 }
 ```
 
 #### Write function:
 
-```dart
+```javascript
 Future<dynamic> requestWriteContract({
-  required String topic,
+  required String? topic,
   required String chainId,
-  required String rpcUrl,
   required DeployedContract deployedContract,
   required String functionName,
   required Transaction transaction,
-  String? method,
   List<dynamic> parameters = const [],
+  String? method,
 });
 ```
 
 #### Usage:
 
 1. Create a DeployedContract object (same as before)
 
-```dart
+```javascript
 // Create DeployedContract object using contract's ABI and address
 final deployedContract = DeployedContract(
   ContractAbi.fromJson(
@@ -135,37 +158,37 @@ final deployedContract = DeployedContract(
 
 2. Write to it by calling a write function
 
-```dart
+```javascript
 Future<void> transferToken() async {
   // Transfer 0.01 amount of Token using Smart Contract's transfer function
-  final result = await _w3mService.requestWriteContract(
-    topic: _w3mService.session.topic,
-    chainId: 'eip155:1',
-    rpcUrl: 'https://{rpc-url}.com',
-    deployedContract: contract,
+  final result = await _appKitModal.requestWriteContract(
+    topic: _appKitModal.session!.topic,
+    chainId: _appKitModal.selectedChain!.chainId,
+    deployedContract: deployedContract,
     functionName: 'transfer',
     transaction: Transaction(
-      from: EthereumAddress.fromHex('0xaddressFrom....'),
-      to: EthereumAddress.fromHex('0xaddressTo....'),
-      value: EtherAmount.fromInt(EtherUnit.finney, 10), // == 0.010
+      from: EthereumAddress.fromHex(_appKitModal.session!.address!), // sender address
     ),
+    parameters: [
+      EthereumAddress.fromHex('0x59e2f66C0E96803206B6486cDb39029abAE834c0'), // recipient address
+      transferValue,
+    ],
   );
 }
 
 Future<void> writeMessage() async {
   // Write a message data
-  final result = await _w3mService.requestWriteContract(
-    topic: _w3mService.session.topic,
-    chainId: 'eip155:1',
-    rpcUrl: 'https://{rpc-url}.com',
-    deployedContract: contract,
+  final result = await _appKitModal.requestWriteContract(
+    topic: _appKitModal.session!.topic,
+    chainId: _appKitModal.selectedChain!.chainId,
+    deployedContract: deployedContract,
     functionName: 'sayHello',
     transaction: Transaction(
-      from: EthereumAddress.fromHex('0xaddressFrom....'),
+      from: EthereumAddress.fromHex(_appKitModal.session!.address!), // sender address
     ),
     parameters: ['Hello world!'],
   );
 }
 ```
 
-For a complete example app check out the [example app](https://github.com/WalletConnect/Web3ModalFlutter/blob/master/example/lib/utils/crypto/eip155.dart#L297) for Web3Modal
+For a complete example app check out the [example app](https://github.com/reown-com/reown_flutter/blob/master/packages/reown_appkit/example/modal/lib/services/eip155_service.dart) for AppKit

docs/appkit/flutter/core/custom-chains.mdx

@@ -1,31 +1,42 @@
-# Custom Chains
+# Custom Networks
 
-## Custom Chain addition and selection
+## Custom Networks addition and selection
 
-You can add your own custom chain to the `W3MChainPresets.chains` object **before initialization**:
+AppKit already comes with a list of supported networks inside of `ReownAppKitModalNetworks` class. You can get supported EVM networks by selecting `ReownAppKitModalNetworks.supported['eip155']` and, currently, only EVM Networks are supported (non-EVM support will come soon)
 
-Like so...
+You can also get supported test networks by doing `ReownAppKitModalNetworks.test['eip155']`.
 
-```dart
-W3MChainPresets.chains.putIfAbsent('<chainID>', () => <Your W3MChainInfo>);
-await _w3mService.init();
-```
+Check the list of suppoted networks here https://github.com/reown-com/blockchain-api/blob/master/SUPPORTED_CHAINS.md#list-of-supported-chains
+
+However, if these chains are not enough or you don't want to support any of them you can modify the list associated to the namespace.
 
-:::info
-If you modify the presets (add/remove chains), it will reflect in the `W3MNetworkSelectButton` widget.
+:::info note
+It is important that this is done before AppKitModal configuration.
 :::
 
-Or you can select your own chain by calling the `selectChain()` method from `W3MService` **after initialization**:.
+```javascript
+// Example adding extra and test networks
+final extraNetworks = ReownAppKitModalNetworks.extra['eip155'] ?? [];
+ReownAppKitModalNetworks.addNetworks('eip155', extraNetworks);
 
-```dart
-await _w3mService.init();
-_w3mService.selectChain(<Your W3MChainInfo>);
+final testNetworks = ReownAppKitModalNetworks.test['eip155'] ?? [];
+ReownAppKitModalNetworks.addNetworks('eip155', testNetworks);
+
+// Example removing Aurora network from the list
+ReownAppKitModalNetworks.removeNetworks('eip155', ['1313161554']);
 ```
 
-By using this option, your custom chain is not going to be added to the list of presets, so it's not going to show up in the `W3MNetworkSelectButton`. Use this method if you are not going to display `W3MNetworkSelectButton`.
+You can also create and add a custom network. For instance...
 
-:::note
-The chain must be EVM compatible
-:::
+```javascript
+final customNetwork = ReownAppKitModalNetworkInfo(
+  name: 'Ethereum',
+  chainId: '1',
+  currency: 'ETH',
+  rpcUrl: 'https://ethereum-rpc.publicnode.com',
+  explorerUrl: 'https://etherscan.io',
+  isTestNetwork: false,
+);
 
-The list of chain presets can be found in [w3m_chains_presets.dart](https://github.com/WalletConnect/Web3ModalFlutter/blob/master/lib/utils/w3m_chains_presets.dart) which is already exported for you to use directly from web3modal package.
+ReownAppKitModalNetworks.addNetworks('eip155', [customNetwork]);
+```

docs/appkit/flutter/core/events.mdx

@@ -2,49 +2,36 @@
 
 ### List of events you can subscribe to in order to get connection updates
 
-```dart
-// A connection is settled
-_w3mService.onModalConnect.subscribe((ModalConnect? event) {});
-```
+#### Modal specific events
 
-```dart
-// Used when SIWEConfig is enabled will be called when SIWE login finishes
-_w3mService.onModalUpdate.subscribe((ModalConnect? event) {});
-```
+```javascript
+_appKitModal.onModalConnect.subscribe((ModalConnect? event) {});
 
-```dart
-// A connection is deleted (disconnected)
-_w3mService.onModalDisconnect.subscribe((ModalDisconnect? event) {});
-```
+_appKitModal.onModalUpdate.subscribe((ModalConnect? event) {});
 
-```dart
-// An error occurs during connection
-_w3mService.onModalError.subscribe((ModalError? event) {});
-```
+_appKitModal.onModalNetworkChange.subscribe((ModalNetworkChange? event) {});
+
+_appKitModal.onModalDisconnect.subscribe((ModalDisconnect? event) {});
 
-```dart
-// User selectes a different network in the dapp
-_w3mService.onModalNetworkChange.subscribe((ModalNetworkChange? event) {});
+_appKitModal.onModalError.subscribe((ModalError? event) {});
 ```
 
----
+#### Session specific events
 
-:::info note
-These methods are only available when connecting through WalletConnect protocol.
-Since Coinbase Wallet uses it own connection channel, these methods are not available when user connects with it.
-:::
+```javascript
+_appKitModal.onSessionExpireEvent.subscribe((SessionExpire? event) {});
 
-```dart
-// A session expires
-_w3mService.onSessionExpireEvent.subscribe((SessionExpire? event) {});
-```
+_appKitModal.onSessionUpdateEvent.subscribe((SessionUpdate? event) {});
 
-```dart
-// A session data is updated
-_w3mService.onSessionUpdateEvent.subscribe((SessionUpdate? event) {});
+_appKitModal.onSessionEventEvent.subscribe((SessionEvent? event) {});
 ```
 
-```dart
-// A request event is happening
-_w3mService.onSessionEventEvent.subscribe((SessionEvent? event) {});
+#### Relay specific events
+
+```javascript
+_appKitModal.appKit!.core.relayClient.onRelayClientConnect.subscribe((EventArgs? event) {});
+
+_appKitModal.appKit!.core.relayClient.onRelayClientError.subscribe((EventArgs? event) {});
+
+_appKitModal.appKit!.core.relayClient.onRelayClientDisconnect.subscribe((EventArgs? event) {});
 ```