DEV Community

Max Daunarovich for Flow Blockchain

Posted on • Updated on

Build on Flow | Learn FCL - 10. How to Create a New Testnet Account with Blocto Wallet

Overview

Our previous exploration of Flow Network were pretty harmless - scripts can’t change the state of the chain, they can just read the data from it. It’s time to change this and make some “dents” here and there. But in order to do this, we will need Flow account. It’s possible to do this in 4 different ways:

  • Using Blocto Wallet (this is the topic of this post)
  • Using Lilico Wallet - we are covering this in Chapter 11
  • Via Flow Faucet and Flow CLI - check Chapter 12 of this series
  • by signing and submitting a transaction, which would create new account (you need to have one, though 😛)

Personally, I gravitate toward the opinion that easiest way to make new account is Blocto Wallet. This is what we gonna do today:

  • create new account with Blocto Wallet
  • authenticate into account via FCL and Blocto Wallet
  • get account balance, using wallet address

How?

There are 2 ways to create new wallet with Blocto:

  • using mobile app
  • using FCL pop-up

There are multiple articles outlining the process of wallet creation with mobile app. For example:

While mobile is great and all - we will reduce extra steps and create our wallet using FCL.

Blocto provides nice step-by-step instructions how to configure and then invoke login popup on their doc site. We will use those bits and pieces to make Blocto Wallet Creator 🧙‍♂️!

Step 1 - Installation

Add "@onflow/fcl": "1.0.0" as your dependency

Step 2 - Setup

Just like the last time, we will import necessary methods and setup FCL:

// Import methods from FCL
import { unauthenticate, logIn, config } from "@onflow/fcl";

// Specify the API endpoint - this time we will use Testnet
const api = "https://rest-testnet.onflow.org";

// This is the endpoint, which will be responsible for wallet authorization
const handshake = "https://flow-wallet-testnet.blocto.app/authn";

// Configure FCL to use mainnet as the access node
config()
  // connect to Flow testnet
  .put("accessNode.api", api)
  .put("challenge.handshake", handshake);
Enter fullscreen mode Exit fullscreen mode

Step 3 - Create Login Sequence

// We will use IIFE to execute our code right away
(async () => {
  console.clear();

  // just in case we have authenticated user, we will log him out first
    await unauthenticate();

    // calling "logIn" will invoke "Sign in with Blocto - Testnet" popup
    const wallet = await logIn();

  console.log({ wallet });})();
})();
Enter fullscreen mode Exit fullscreen mode

Step 4 - Launch!

When the code will be executed, you should see popup with title “Sign in with Blocto Testnet"

Blocto - Register

Fill in your email address and press “Sign in / Register” button.

After that you should get a passcode in your inbox for the email you’ve provided on previous step.

Blocto - PassCode

If the passcode is correct, Blocto popup will show your wallet address:

Blocto - Confirm

After pressing “Confirm” button console log should be populated with account details (this is for my address, but yours should look similar):

{
    f_type: "USER",
    f_vsn: "1.0.0",
    addr: "0xe7dd0f2ee4e077e2",
    cid: "ca88f086a545ce3c552d80",
    loggedIn: true,
    expiresAt: 1656443452552
}
Enter fullscreen mode Exit fullscreen mode

Congratulations, now you are the owner of freshly baked Flow account 🍰!

Step 5 - Get Account Balance

Let’s use our knowledge from previous post and fetch our current balance. In order to do this, let’s update our imports:

import { account, query, config } from "@onflow/fcl";
Enter fullscreen mode Exit fullscreen mode

and update our IIEFE:

// We will use IIFE to execute our code right away
(async () => {
  console.clear();
  await unauthenticate();

  const wallet = await logIn();
  console.log({ wallet });

    // We will take only "balance" field from account details
  const { balance }= await account(wallet.addr);
  const flowBalance = result.balance / Math.pow(10, 8);
  console.log({ flowBalance });
})();
Enter fullscreen mode Exit fullscreen mode

That’s 0.001 FLOW on your account. You are rich 🤑!

Until next time 👋

Resources

Other resources you might find useful:

Top comments (0)