Creating a Crypto Wallet with Flutter using Moralis Blueprints and Moralis API

Hey, what’s up YouTube? Welcome to another Morales Blueprint! Mobile applications seem to be the future for Web3, and no one seems to be building dApps on mobile. So, this is your opportunity! This week, you are going to learn how to create your own wallet from scratch using Flutter and integrating Web3 into your mobile development. At the end, we are going to have something like this: a new wallet that generates a mnemonic phrase, verifies it, and generates new private and public keys. With these keys, we can access a wallet address and check its balance. If we import a wallet from an existing mnemonic seed, we can directly access its balance and NFT collections. We will also have the ability to send funds to another wallet, and if we want to start from scratch, we can always log out and create a new wallet. So, if you want to learn how to accomplish this, keep watching because we are just getting started!

Introduction:
Hey, what’s up YouTube? My name is Vasili, your Web3 instructor from Latin America, Ecuador. I’ve been working in the space since 2020 with cool crypto projects. In my free time, I really enjoy singing and playing the guitar. And if the weather is good, I like to go out and take some meditations. But enough about me, let’s go back to the video and start building!

Mobile Development for Web3:
First things first, let’s address the elephant in the room. Mobile development for Web3 is not that good. We have the official frameworks for mobile development, such as Swift and Kotlin for iOS and Android respectively. And then we have the hybrid ones, such as React Native and Flutter. The problem is that these are not the most popular frameworks for development, and Web3 is not yet integrated well into mobile applications. Some of the libraries we are going to use today may get deprecated really fast, and we may have to do some tinkering here and there. Besides that, I think that this is going to be a really good blueprint on which you are going to understand how you can integrate Web3 technologies into your mobile development workflow and also connect it to the Morales APIs, because yes, they are the fastest in the Web3 space. So, let’s stop wasting time and start coding!

Creating the Wallet:
First of all, let’s create a new project called “Web3 Wallet”. This is going to create an empty project, and after the process finishes, we are going to have the default Flutter application. Let’s transform this into the Web3 wallet. For that, we need to talk about the libraries we are going to use to build this. The first and core library is the “web3dart”. It’s a way to connect to an ethereum node, send transactions, interact with smart contracts, and much more. The latest version at the time of this video is 2.6.1. We are also going to use the “bip39” package, which is a Dart implementation for the bitcoin BIP39. This is the way we are going to generate the mnemonic phrases to create our wallets. We are also going to use the “ed25519_hd” package, which is a library for signing with Ed25519 public keys. Finally, we are going to use the “hex” library, which is a way to easily encode and decode hexadecimal characters, such as the wallet address. We need to add all these packages to our `pubspec.yaml` file under the `dependencies` section. Once we save this, Flutter is going to automatically run the `flutter pub get` command, which is going to add and install these libraries to our project.

Creating the Wallet Provider:
Now, let’s create the functionality for the wallet. We are going to use the `wallet_provider.dart` file for this. In this file, we are going to import the libraries we are going to use: `web3dart`, `bip39`, `ed25519_hd`, and `hex`. Then, we are going to create an abstract class called `WalletAddressService`. This class is going to have three functions: `generateMnemonic`, `getPrivateKey`, and `getPublicKey`. These abstract classes work the same as interfaces in Solidity contracts. Next, we are going to create the main class called `WalletProvider`, which extends `ChangeNotifier` from the `flutter/foundation` package. This class is going to implement the `WalletAddressService` and override its functions. The `ChangeNotifier` is just a way for Flutter to announce variable or state changes throughout the application. Finally, we are going to create the functionality for each of these functions. We are going to generate the mnemonic phrase using the `bip39` library, get the private key using the mnemonic phrase and the `ed25519_hd` library, and get the public key using the private key and the `web3dart` library. We are also going to add the functionality to store the private key using the `shared_preferences` package. This way, the private key will persist even if we close and reopen the application.

Testing the Wallet Provider:
Now, let’s test the functionality of the wallet provider. In the main function, we need to import the `wallet_provider.dart` file. Then, we can create an instance of the `WalletProvider` and use its functions to generate the mnemonic phrase, get the private key, and get the public key. We can print these values to the console to verify that everything is working correctly. If we run the application and click on the “Generate Wallet” button, we should see the generated mnemonic phrase, private key, and public key in the console.

Storing the Private Key:
However, we have a problem. If we generate these private keys and don’t store them inside the application, each time we close and reopen the application, they will be erased. So, we need a way to store them inside the application memory. To do this, we can use the `shared_preferences` plugin. First, we need to add it to our `pubspec.yaml` file. Then, in the `WalletProvider` class, we can create a variable to store the private key and two functions to load and set the private key using `shared_preferences`. We need to call the `loadPrivateKey` function in the `initState` method of the widget that uses the `WalletProvider`. This way, the private key will be loaded into the application memory when the widget is initialized. We also need to call the `setPrivateKey` function after generating the private key in the `getPrivateKey` function. This way, the private key will be stored in the `shared_preferences` and persist even if we close and reopen the application.

Creating the Wallet Interface:
Now that we have the functionality to generate and store the private key, let’s create the interface for the wallet. We already have a template for the wallet interface, so we can use that as a starting point. We need to replace the placeholder text with the actual values from the `WalletProvider`. We can use the `Consumer` widget from the `provider` package to listen for changes in the `WalletProvider` and update the interface accordingly. We also need to add the functionality to copy the mnemonic phrase to the clipboard and verify it. We can use the `clipboard` package to copy the mnemonic phrase and the `Navigator` widget to navigate to the verification page. Once the mnemonic phrase is verified, we can navigate to the wallet page and display the wallet address, balance, and NFTs.

Getting the Balance and NFTs:
To get the balance and NFTs of the wallet, we can use the Morales APIs. We need to create a backend endpoint using Flask and the Morales Python SDK. This endpoint will connect to the Morales APIs and return the balance and NFTs of the wallet. We can then create a function in the Flutter app to fetch this data from the backend endpoint and update the wallet interface accordingly. We can use the `http` package to make HTTP requests to the backend endpoint and the `web3dart` package to interact with the Ethereum blockchain. Once we have the balance and NFTs, we can display them in the wallet interface.

Sending Tokens:
Finally, we can add the functionality to send tokens from one wallet to another. We need to create a new component called `SendTokens` that will handle the sending of tokens. We can use the `web3dart` package to send transactions and the `http` package to connect to the Ethereum network. We also need to connect to a RPC client, such as Infura or Alchemy, to send the transactions. Once the transaction is sent, we can update the balance of the wallet to reflect the new balance.

Conclusion:
In conclusion, we have learned how to create a cryptocurrency wallet from scratch using Flutter and integrate Web3 technologies into our mobile development workflow. We have covered the generation of mnemonic phrases, the storage of private keys, the retrieval of balances and NFTs, and the sending of tokens. This blueprint provides a solid foundation for building your own wallet with additional functionalities. Remember to check out the final project and the template in the description for further reference. Thank you for watching, and I’ll see you in the next video!

Frequently Asked Questions:

1. Can I use this blueprint to create a wallet for a different blockchain?
Yes, you can use this blueprint as a starting point and modify it to work with a different blockchain. You will need to update the RPC client and the chain ID accordingly.

2. How secure is the storage of the private key?
The private key is stored using the `shared_preferences` package, which provides a secure storage solution on the device. However, it is always recommended to use additional security measures, such as encryption, to further protect the private key.

3. Can I use this blueprint to create a multi-signature wallet?
This blueprint focuses on creating a single-signature wallet. However, you can extend the functionality to support multi-signature wallets by modifying the transaction signing process and adding additional verification steps.

4. How can I add support for different cryptocurrencies?
To add support for different cryptocurrencies, you will need to modify the backend endpoint to connect to the respective blockchain APIs and retrieve the balance and NFTs for the specific cryptocurrency. You will also need to update the wallet interface to display the relevant information for each cryptocurrency.

5. Can I use this blueprint for production-ready applications?
This blueprint provides a solid foundation for building a cryptocurrency wallet. However, it is recommended to thoroughly test and review the code before deploying it to a production environment. Additionally, you may need to add additional security measures and optimize the code for performance and scalability.