This project demonstrates how to use FCL in your webapp and interact with Flow and wallet providers. You can find an online demo Here

In order for this demo to work, you have to setup the dependencies first:

• Install Flow CLI Here
  The Flow CLI is a command-line interface that provides useful utilities for building Flow applications. The tool we need in this demo is Flow emulator, a local emulator of Flow blockchain.
• Install project dependencies
  Run yarn at project root.

• Start Flow emulator
  Run flow emulator start at project root. Flow CLI uses ./flow.json as config to start up the local Flow emulator.
  The emulator provides a local access node at http://localhost:8080
• Start FCL dev-wallet
  Run yarn run dev-wallet at project root, which starts FCL dev wallet with private key identical to the one defined in ./flow.json.
  The dev wallet is served at http://localhost:8701
• Start demo webapp
  Run yarn start at project root and you will see the demo webapp running at http://localhost:3000

All the demo cases are located in ./src/demo. Each component is responsible for one example interaction with FCL.

• GetLatestBlock: Get the information of the latest block produced on Flow blockchain
• GetAccount: Get the account information for any specified account address
• ScriptOne: Executes a simple script (read-only)
• ScriptTwo: Executes a simple script (read-only) but with custom decoder for custom Cadence data structure
• Authenticate: Handles sign in/out logic with FCL wallet
• UserInfo: Subscribes to fcl.currentUser() and shows the connected user account information
• SendTransaction: Sends a simple transaction to Flow. This requires the signatures from the connected user
• DeployContract: Deploys a contract to the current user's code storage
• InteractWithContract: Sends a simple transaction that executes a contract method. This requires the signatures from the connected user

You can also test on Flow testnet instead of local emulator. To do so, simply update the FCL config inside ./src/config.js:

fcl.config()
  .put("accessNode.api", "https://access-testnet.onflow.org")
  .put("challenge.handshake", "https://flow-wallet-testnet.blocto.app/authn")

This will use a testnet access node instead of local emulator, and Blocto testnet wallet instead of local dev-wallet.

If you encounter any questions while trying out Flow, please go to Flow Discord Server, where you can find other developers to help you out.
If you have any problem integrating Blocto wallet, you can also check out Blocto Discord Server

• This project was bootstrapped with Create React App.
• A lot of the examples were taken from the tutorial in FCL