Have a project?
Let’s build it.
Leave your contacts and get a free consultation from Axon’s Manager.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
— our projects
Muse Frame
Muse Frame is dedicated to digital art projects which allows the connection of digital wallets and shows entire art galleries on physical frames.
Before we started our partnership, the client had an MVP of the product. Our major goal was to improve it by creating a software architecture solution and rewriting the application with the Flutter framework for Android and iOS devices.
overview
[01]
Business challenges
We started our work by identifying the major project challenges. They included:
- Rewrite iOS and Android mobile apps from React Native to Flutter
- Connect the popular NFT wallets to mobile apps
- Build Android app for frame devices that will support custom hardware profile bundled inside the frame devices
- Cast image and video NFT inside the frame app
- Set up communication between mobile app and frame app
- Add feature to update frame app from mobile app
- Configure frames directly from mobile app
Solution
[02]
Rewriting iOS and Android mobile apps from React Native to Flutter
The client came to us with MVP apps for iOS and Android devices published in the stores. The mobile apps were developed using React Native framework for cross-platform app development.
The React Native project was not flexible and scalable enough, so the decision was to rewrite the project by using Flutter. Our team prepared the app architecture and rewrote the project with Flutter framework. It allowed us to implement the new app features faster.
[03]
Connecting the popular NFT wallets to mobile apps
The client request was to be able to connect and import NFT collections from the most popular NFT wallets. We integrated the direct Metamask and Coinbase wallets connection inside the mobile app and Wallet Connect protocol which enables wallets and apps to securely connect and interact.
[04]
Building Android app for frame devices
For showing NFT collections we have frame devices - the devices with custom hardware profile and Android OS inside. The frame devices are delivered in different sizes - from 10'' to 55''. According to that, we created flexible UI components, which allows users to enjoy the NFT art on any screen. The development process was focused on creating an Android app which will work with a custom frame device hardware profile.
[05]
Casting image and video NFT inside frame app
The other important case is the support of video and image NFTs. The NFT itself contains metadata, which is used to define the type of content. Due to the fact that there are many NFTs in the world, their metadata may be different. So, the challenge was to properly determine the type of NFT and choose the component for showing (Image or Video Player). We resolved it by combining these checks on mobile and frame.
While working on video NFT we were encountered with hardware limitations on frame devices that didn't allow frame app to play videos smoothly. We resolved it by tuning the video player config for the limited hardware profile.
[06]
Communication between mobile and frame app
For connecting frame app to mobile and sending commands we used third-party service based on MQTT protocol.
Mobile app sends command to the frame using back end API, which covers:
- User accounts registration and management
- Connecting frame to the user account
- Configuring the frame (settings volume, brightness, name)
- Store/update NFT information
- Delivering updates initiated from mobile client into frame app
[07]
Add feature to update frame app from mobile
In this step we implemented a custom update process without Google Play services, because the app is bundled directly inside the frame, without Google Play.
The new frame app builds are delivered into our back end using API. And the mobile user can manually initiate updates from the mobile app on frame settings.
[08]
Configure frames directly from mobile app
We added the ability for mobile app users to configure how each NFT will be shown on the frame. Users can manually configure a lot of parameters, including: duration, zooming, background, showing/hiding NFT details, and others. All of these params can be applied from a mobile app and immediately shown on the frame.
Technology stack
Android
Dependencies:
Media3
ExoPlayer
Hilt
Room
Navigation components
Retrofit2
Glide
Flutter
Dependencies:
BLoC
Dio
Hive
GetIt
Wallet Connect SDK
Coinbase SDK
RxDart
Back end
Task Queue:
Celery