@@ -32,7 +32,7 @@ Web3Auth architecture and implementation. For those who want to skip straight to
32
32
find it on
33
33
[ GitHub] ( https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/android/android-playground ) .
34
34
35
- Here are few screenshots of the application.
35
+ Here are a few screenshots of the application.
36
36
37
37
<img
38
38
style = { { display: " block" , margin: " 20px auto" }}
@@ -53,7 +53,7 @@ Web3Auth Dashboard.
53
53
Once, you have set up the Web3Auth Dashboard, and created a new project, it's time to integrate
54
54
Web3Auth in your Android application. For the implementation, we'll use the
55
55
[ "web3auth-android-sdk"] ( https://github.com/Web3Auth/web3auth-android-sdk ) SDK. This SDK facilitates
56
- integration with Web3Auth. This way you can easily manage embedded wallet in your Android
56
+ integration with Web3Auth. This way you can easily manage an embedded wallet in your Android
57
57
application.
58
58
59
59
### Installation
@@ -141,8 +141,8 @@ class Web3AuthHelperImpl(
141
141
}
142
142
```
143
143
144
- Once we have the created ` Web3AuthHelper ` , next is to initialize the ` Web3Auth ` instance in the Koin
145
- module and make it a singleton component.
144
+ Once we have the created ` Web3AuthHelper ` , the next is to initialize the ` Web3Auth ` instance in the
145
+ Koin module and make it a singleton component.
146
146
147
147
``` kotlin
148
148
val appModule = module {
@@ -177,13 +177,13 @@ private fun getWeb3AuthHelper(context: Context): Web3AuthHelper {
177
177
178
178
To check whether the user is authenticated, you can use the ` getPrivateKey ` or ` getEd25519PrivKey `
179
179
method. For a user already authenticated, the result would be a non-empty ` String ` . You can navigate
180
- to different views based on the result. If the user is already authenticated, we'll generate prepare
181
- the ` Credentials ` , important to interact with blockchain. Along with that, we'll retrieve user info,
182
- and navigate them to ` HomeScreen ` . In case of no active session, we'll navigate to ` LoginScreen ` to
183
- authenticate again.
180
+ to different views based on the result. If the user is already authenticated, we'll generate and
181
+ prepare the ` Credentials ` , important to interact with the blockchain. Along with that, we'll
182
+ retrieve user info, and navigate them to ` HomeScreen ` . In case of no active session, we'll navigate
183
+ to ` LoginScreen ` to authenticate again.
184
184
[ Learn more about Web3Auth session management] ( /docs/features/session-management ) .
185
185
186
- Since, we are using the MVVM architecture, we'll create a ` ViewModel ` class to encapsulate the
186
+ Since we are using the MVVM architecture, we'll create a ` ViewModel ` class to encapsulate the
187
187
business logic for Web3Auth and Ethereum chain interaction.
188
188
189
189
``` kotlin
@@ -246,11 +246,11 @@ class MainViewModel(private val web3AuthHelper: Web3AuthHelper) : ViewModel() {
246
246
247
247
### Authentication
248
248
249
- If the user is not authenticated, we can utilize the ` login ` method to authenticate user. For the
250
- Wallet, we will addEmail Passwordless login. We'll create a helper function, ` login ` inside
249
+ If the user is not authenticated, we can utilize the ` login ` method to authenticate the user. For
250
+ the Wallet, we will add an Email Passwordless login. We'll create a helper function, ` login ` inside
251
251
` MainViewModel ` . The login method is pretty straightforward in Web3Auth and takes ` LoginParams ` as
252
- input. After successfully logging in, we'll generate prepare the ` Credentials ` , important to
253
- interact with blockchain. Along with that, we'll retrieve user info, and navigate them to
252
+ input. After successfully logging in, we'll generate and prepare the ` Credentials ` , important to
253
+ interact with the blockchain. Along with that, we'll retrieve user info, and navigate them to
254
254
` HomeScreen ` .
255
255
256
256
Learn more about [ Web3Auth LoginParams] ( /docs/sdk/pnp/android/usage#arguments ) .
@@ -288,17 +288,19 @@ class MainViewModel(private val web3AuthHelper: Web3AuthHelper) : ViewModel() {
288
288
## Set up Blockchain Providers
289
289
290
290
Once we have successfully authenticated the user, the next step would be to fetch the user details,
291
- retrieve wallet address and prepare blockchain providers for interactions. For this guide, we are
292
- supporting only Ethereum ecosystem, but the general idea can be used for any blockchain ecosystem.
291
+ retrieve the wallet address, and prepare blockchain providers for interactions. For this guide, we
292
+ are supporting only the Ethereum ecosystem, but the general idea can be used for any blockchain
293
+ ecosystem.
293
294
294
- Given that the project follows MVVM architecture pattern, we'll want to create an UseCase to
295
- interact with the Blockchain. This UseCase will help us easily expand the blockchain support while
296
- isolate it from the rest of the application.
295
+ Given that the project follows MVVM architecture pattern, we'll want to create a UseCase to interact
296
+ with the Blockchain. This UseCase will help us easily expand the blockchain support while isolating
297
+ it from the rest of the application.
297
298
298
- For interacting ethereum chains, we'll use the [ web3j] ( https://github.com/hyperledger/web3j ) SDK.
299
+ For interacting with Ethereum chains, we'll use the [ web3j] ( https://github.com/hyperledger/web3j )
300
+ SDK.
299
301
300
302
To install the web3j SDK, in your module-level ` build.gradle ` or ` settings.gradle ` file, add ` web3j `
301
- in your app level dependencies.
303
+ in your app- level dependencies.
302
304
303
305
``` groovy
304
306
dependencies {
@@ -313,8 +315,8 @@ a new class, `EthereumUseCase` interface, which will used as a base class for `E
313
315
If you wish to support any additional ecosystem, you can create the chain-agnostic UseCase and
314
316
implement the methods.
315
317
316
- If you want to learn, how you can integrate different blockchain with Web3Auth, you can checkout our
317
- [ Connect Blockchain resources] ( /docs/connect-blockchain/ ) .
318
+ If you want to learn, how you can integrate different blockchains with Web3Auth, you can check out
319
+ our [ Connect Blockchain resources] ( /docs/connect-blockchain/ ) .
318
320
319
321
``` kotlin
320
322
interface EthereumUseCase {
@@ -329,8 +331,8 @@ interface EthereumUseCase {
329
331
330
332
Generally, for any blockchain provider, you'll only require the ` getBalance ` , ` sendTransaction ` , and
331
333
` signMessage ` . The ` getBalance ` and ` approve ` can be used to interact with smart contracts. To
332
- interact with smart contracts, we'll require to generate smart contract function wrappers in Java
333
- from Solidity ABI files.
334
+ interact with smart contracts, we'll be required to generate smart contract function wrappers in
335
+ Java from Solidity ABI files.
334
336
335
337
### Smart Contract Wrappers
336
338
@@ -369,9 +371,9 @@ interface IERC20 {
369
371
}
370
372
```
371
373
372
- After creating the interface for the ERC-20 token, the next step is to compile the solidity file,
373
- and generate the abi and bin files to generate the wrappers. To compile the solidity file, we'll use
374
- the [ solc] ( https://docs.soliditylang.org/en/latest/installing-solidity.html ) .
374
+ After creating the interface for the ERC-20 token, the next step is to compile the solidity file and
375
+ generate the abi and bin files to generate the wrappers. To compile the solidity file, we'll use the
376
+ [ solc] ( https://docs.soliditylang.org/en/latest/installing-solidity.html ) .
375
377
376
378
To install the solc we'll require the npm or yarn. If you have the npm already installed, you can
377
379
use the below command to install the solc package globally.
@@ -395,19 +397,19 @@ web3j generate solidity -b /path/to/Tokne.bin -a /path/to/Token..abi -o /path/to
395
397
```
396
398
397
399
Once you run the command, it'll create a wrapper ` Token.java ` which extends the ` Contract ` . You can
398
- use this class to interact with the smart contracts. Please make sure to compile and regrenerate
399
- wrappers if you make any changes in the smart conract .
400
+ use this class to interact with the smart contracts. Please make sure to compile and regenerate
401
+ wrappers if you make any changes in the smart contract .
400
402
401
403
### Ethereum UseCase Implementation
402
404
403
405
Once we have generated ` Token ` wrapper, we'll create ` EthereumUseCaseImpl ` and implement the
404
406
methods. To create the ` Web3j ` instance, you'll require the rpcTarget URL. If you are using public
405
407
RPCs, you can face some network congestion. It's ideal to use paid RPCs for production.
406
408
407
- The ` getBalance ` , and ` approve ` methods are used to interact with smart contracts on Ethereum
408
- ecosystem. The ` getBalance ` is used to read the balance from the ERC-20 smart contracts, where as
409
- the ` approve ` is used to change the approval to zero for the ERC-20. For the ` getBalance ` and
410
- ` approve ` we'll be using the ` Token ` wrapper.
409
+ The ` getBalance ` , and ` approve ` methods are used to interact with smart contracts in the Ethereum
410
+ ecosystem. The ` getBalance ` is used to read the balance from the ERC-20 smart contracts, whereas the
411
+ ` approve ` is used to change the approval to zero for the ERC-20. For the ` getBalance ` and ` approve `
412
+ we'll be using the ` Token ` wrapper.
411
413
412
414
``` kotlin
413
415
class EthereumUseCaseImpl (
@@ -505,14 +507,14 @@ val appModule = module {
505
507
506
508
## Set up Supported Chains
507
509
508
- After having our blockchain UseCase in place, the next step on the list to define the supported
509
- chains. To keep things simple, we' ll simply a create a new file `ChainConfigList` with array of
510
+ After having our blockchain UseCase in place, the next step on the list is to define the supported
511
+ chains. To keep things simple, we' ll simply create a new file `ChainConfigList` with an array of
510
512
ChainConfig to define the supported chains.
511
513
512
514
For the guide, we have added the support for Ethereum Sepolia, and Arbitrum Sepolia. If you wish to
513
515
support more chains in your wallet, you can simply add the config with the required details in the
514
- list below. Along with that you can also add the desired chain using the add custom chain feature in
515
- the app.
516
+ list below. Along with that, you can also add the desired chain using the add custom chain feature
517
+ in the app.
516
518
517
519
```kotlin
518
520
var chainConfigList = arrayOf(
@@ -542,16 +544,16 @@ var chainConfigList = arrayOf(
542
544
## Wallet Implementation
543
545
544
546
Once, we have set up the EthereumUseCase, and supported chains, it' s time to integrate and plug them
545
- into the wallet. Since , we have already created `MainViewModel ` before, we' ll add the other features
547
+ into the wallet. Since we have already created `MainViewModel ` before, we' ll add the other features
546
548
inside it.
547
549
548
- This will help us to seperate business logic from UI.
550
+ This will help us to separate business logic from UI.
549
551
550
552
### Set up MainViewModel
551
553
552
- Once we have set up supported chains, the next on list is to add more functionality in
553
- `MinaViewModel` to help us maange the state & functionality of the wallet. It will help us manage
554
- the state of currently selected chain, fetch balance, sign transactions, and access other
554
+ Once we have set up supported chains, the next on the list is to add more functionality in
555
+ `MinaViewModel` to help us manage the state & functionality of the wallet. It will help us manage
556
+ the state of the currently selected chain, fetch balance, sign transactions, and access other
555
557
functionalities of Web3Auth.
556
558
557
559
```kotlin
@@ -721,10 +723,10 @@ Once, we have our view model ready, we create a new `HomeScreen` to show user de
721
723
address, wallet address, user's balance for selectedChain, and blockchain interaction methods.
722
724
723
725
To get the user's balance, we'll use ` getBalance ` method from the ` MainViewModel ` . The method
724
- internally uses ` EthereumUseCaseImpl ` to retrieve user's wallet address, and fetch the wallet
725
- balance for the address. Checkout ` EthereumUseCaseImpl ` implementation for more details.
726
+ internally uses ` EthereumUseCaseImpl ` to retrieve the user's wallet address and fetch the wallet
727
+ balance for the address. Check out ` EthereumUseCaseImpl ` implementation for more details.
726
728
727
- For the bottom navigation, we have created ` TabBarView ` , please checkout TabBarView.kt file for more
729
+ For the bottom navigation, we have created ` TabBarView ` , please check TabBarView.kt file for more
728
730
details on UI implementation.
729
731
730
732
``` kotlin
@@ -934,10 +936,10 @@ fun AccountView(viewModel: MainViewModel) {
934
936
935
937
### Chain Interactions
936
938
937
- Once we have setup ` HomeScreen ` and ` AccountView ` , the next step is to setup chain interactions for
938
- signing message , signing transaction , reading from contracts, and writing on contracts. For signing
939
- message and transaction, we'll create a new ` TransactionScreen ` widget and utilize ` signMessage ` and
940
- ` sendTransaction ` from ` MainViewModel ` for respective functionality.
939
+ Once we have set up ` HomeScreen ` and ` AccountView ` , the next step is to set up chain interactions
940
+ for signing messages , signing transactions , reading from contracts, and writing on contracts. For
941
+ signing messages and transaction, we'll create a new ` TransactionScreen ` widget and utilize
942
+ ` signMessage ` and ` sendTransaction ` from ` MainViewModel ` for the respective functionality.
941
943
942
944
``` kotlin
943
945
@OptIn(ExperimentalPagerApi ::class )
@@ -1053,7 +1055,7 @@ fun TransactionView(viewModel: MainViewModel) {
1053
1055
}
1054
1056
```
1055
1057
1056
- Once we have set up ` TransactionScreen ` , next is to create ` SmartContractsScreen ` for fetching
1058
+ Once we have set up ` TransactionScreen ` , the next is to create ` SmartContractsScreen ` for fetching
1057
1059
ERC-20 token balance, and revoking approval. We'll utilize the ` getTokenBalance ` and
1058
1060
` revokeApproval ` methods from ` MainViewModel ` for the above functionality.
1059
1061
0 commit comments