DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs