6 min read

How to Build for Mobile

Overview

The following documentation aims to educate you on building a native mobile application on Flow. It first presents Monster Maker, a starter project we’ve built to represent simple Flow mobile concepts. Next it presents various developer resources related to building mobile native Flow applications.

Monster Maker

Monster Maker is a native iOS app that allows users to connect a wallet, sign a transaction to mint an NFT (a monster) and display their collection of NFTs (their monsters) within the app. It’s meant to be a lightweight sample project to exemplify how to build a mobile native Flow project. If you’re looking to build a native mobile application for Flow, exploring the Monster Maker code base first or even building off of it is a great way to get started.

Github Repo

The Monster Maker Github Repo can be found here:

https://github.com/onflow/monster-maker

Building to Device

Before you run Monster Maker on your device, please make sure you have installed the Xcode14 from Mac App Store. Once you clone the repo, open the MonsterMaker.xcodeproj under the iOS folder.

Xcode should automatically setup the project for you. If you do see any error related to dependencies, run Xcode Menu -> File -> Packages -> Reset Package Cache to resolve the issue.

In the meantime, you can choose a simulator or your iPhone to run. For more detail here is the official doc. For run in real device, there are a few steps to deal with signing:

Add your apple account to the Xcode which can be accessed from Xcode Menu -> Settings -> Add account.
Change the Team to your Personal Apple account from the Signing & Capabilities under the project target menu. For more detail, please check the screenshot below.

Connecting to a Wallet

To connect with wallets, there is native wallet discovery in the app. Once you click on connect, it will bring out the list of the wallets which support HTTP/POST or WC/RPC method.

FCL Config

To make sure, the wallet can recognise your dApp, there is a few field you will need to config before connect to a wallet. The account proof config is optional. In addition, you will need to create a project id from walletconnect cloud before you can connect to the WC/RPC compatible wallet such as dapper self custody or lilico wallet.

1
import FCL
2

3
// Config the App
4
let defaultProvider: FCL.Provider = .dapperPro
5
let defaultNetwork: Flow.ChainID = .testnet // or .mainnet
6

7
// Optinal: Config for account proof
8
let accountProof = FCL.Metadata.AccountProofConfig(appIdentifier: "Monster Maker")
9

10
// Config for WC/RPC compatible wallet
11
let walletConnect = FCL.Metadata.WalletConnectConfig(urlScheme: "monster-maker://", projectID: "12ed93a2aae83134c4c8473ca97d9399")
12

13
// Config basic dApp info
14
let metadata = FCL.Metadata(appName: "Monster Maker",
15
                            appDescription: "Monster Maker Demo App for mobile",
16
                            appIcon: URL(string: "https://i.imgur.com/jscDmDe.png")!,
17
                            location: URL(string: "https://monster-maker.vercel.app/")!,
18
                            accountProof: accountProof,
19
                            walletConnectConfig: walletConnect)
20
fcl.config(metadata: metadata,
21
           env: defaultNetwork,
22
           provider: defaultProvider)
23

24
// Import keywords replacement for cadence query and transaction
25
fcl.config
26
    .put("0xFungibleToken", value: "0x631e88ae7f1d7c20")
27
    .put("0xMonsterMaker", value: "0xfd3d8fe2c8056370")
28
    .put("0xMetadataViews", value: "0x631e88ae7f1d7c20")
29
    .put("0xTransactionGeneration", value: "0x44051d81c4720882")

Open wallet discovery

In Monster Maker, the Connect button triggers opening of Wallet Discovery

For the wallet support HTTP/POST, it will use webview to show the following actions.

For the wallet support WC/RPC, it will use deep-link to the wallet for actions.

You can open the native wallet discovery to make the selection, but also you can connect to the specific wallet as well.

Here is the code snippet of it:

1
import FCL
2

3
// Open discovery view
4
fcl.openDiscovery()
5

6
// Or manual connect to specific wallet
7
try fcl.changeProvider(provider: provider, env: .testnet)
8
try await fcl.authenticate()

Signing a Transaction

In Monster Maker, Initializing the NFT collection with the Initialize button triggers a transaction.

Similar to what we have on fcl-js, native sdk also use query and mutate for on-chain interactions. To request a signature from user, you can simply use fcl.mutate method. By default, the user will be the payer, proposer and authorizer, if you want to add custom authorizer please refer to the code from Server and iOS end.

1
guard let user = fcl.currentUser else {
2
    // Not signin
3
    return
4
}
5

6
let txId = try await fcl.mutate(
7
                            cadence: """
8
                                    transaction(test: String, testInt: Int) {
9
                                                   prepare(signer: AuthAccount) {
10
                                                        log(signer.address)
11
                                                        log(test)
12
                                                        log(testInt)
13
                                                   }
14
                                               }
15
                                    """,
16
                            args: [
17
														.string("Hello"),
18
                            .int(10)
19
                           ],
20
                            gasLimit: 999,
21
                            authorizors: [user])
22

23
print("txId -> \(txId)")

View NFT

The View page in Monster Maker exemplifies showing Monster Maker NFTs held by the connected wallet

To view the NFT from an wallet address, first and foremost, we highly recommend you use NFT-Catalog standard when you are ready. So that it will be easy to allow other platform like marketplace and wallet to recognise and display your NFT collection. However, during development, you always can query your NFT with fcl.query. Here is an example:

Query cadence

1
import NonFungibleToken from 0xNonFungibleToken
2
    import MonsterMaker from 0xMonsterMaker
3
    import MetadataViews from 0xMetadataViews
4
    
5
    pub struct Monster {
6
        pub let name: String
7
        pub let description: String
8
        pub let thumbnail: String
9
        pub let itemID: UInt64
10
        pub let resourceID: UInt64
11
        pub let owner: Address
12
        pub let component: MonsterMaker.MonsterComponent
13

14
        init(
15
            name: String,
16
            description: String,
17
            thumbnail: String,
18
            itemID: UInt64,
19
            resourceID: UInt64,
20
            owner: Address,
21
            component: MonsterMaker.MonsterComponent
22
        ) {
23
            self.name = name
24
            self.description = description
25
            self.thumbnail = thumbnail
26
            self.itemID = itemID
27
            self.resourceID = resourceID
28
            self.owner = owner
29
            self.component = component
30
        }
31
    }
32

33
    pub fun getMonsterById(address: Address, itemID: UInt64): Monster? {
34

35
        if let collection = getAccount(address).getCapability<&MonsterMaker.Collection{NonFungibleToken.CollectionPublic, MonsterMaker.MonsterMakerCollectionPublic}>(MonsterMaker.CollectionPublicPath).borrow() {
36
            
37
            if let item = collection.borrowMonsterMaker(id: itemID) {
38
                if let view = item.resolveView(Type<MetadataViews.Display>()) {
39
                    let display = view as! MetadataViews.Display
40
                    let owner: Address = item.owner!.address!
41
                    let thumbnail = display.thumbnail as! MetadataViews.HTTPFile
42

43
                    return Monster(
44
                        name: display.name,
45
                        description: display.description,
46
                        thumbnail: thumbnail.url,
47
                        itemID: itemID,
48
                        resourceID: item.uuid,
49
                        owner: address,
50
                        component: item.component
51
                    )
52
                }
53
            }
54
        }
55

56
        return nil
57
    }
58

59
    pub fun main(address: Address): [Monster] {
60
        let account = getAccount(address)
61
        let collectionRef = account.getCapability(MonsterMaker.CollectionPublicPath)!.borrow<&{NonFungibleToken.CollectionPublic}>()
62
            ?? panic("Could not borrow capability from public collection")
63
        
64
        let ids = collectionRef.getIDs()
65

66
        let monsters : [Monster] = []
67

68
        for id in ids {
69
            if let monster = getMonsterById(address: address, itemID: id) {
70
                monsters.append(monster)
71
            }
72
        }
73

74
        return monsters
75
    }

1
let nftList = try await fcl.query(script: cadenceScript, 
2
																		args: [.address(address)])
3
														.decode([NFTModel].self)

External Resources

FCL Swift

FCL Swift is the iOS native SDK for FCL. This SDK is integrated into the Monster Maker sample.

https://github.com/Outblock/fcl-swift

FCL Android

FCL Android is the Android native SDK for FCL.

https://github.com/Outblock/fcl-android

FCL Wallet Connect 2.0

One of the easiest ways to connect to a wallet via a mobile native dApp is through Flow’s new support for Wallet Connect 2.0. This is the pattern that Monster Maker uses to connect to the Dapper Self Custody wallet and Lilico. For more information on FCL Wallet Connect 2.0, check out this page:

FCL Wallet Connect

How to Build a Native iOS Dapp

The Agile Monkeys has written a very comprehensive guide on how to build a native mobile application on iOS and interface with fcl-swift. Found here:

How to Build a Native iOS Dapper Source Code