@onflow/fcl

@onflow/fcl

A high level abstraction (built on top of @onflow/sdk) that enables development of browser based dApps.

Status

• Interface Stable (low risk of change)
• Realization Unstable (high risk of change)

We are currently confident in how to consume this package and how to build it, but this module is currently in an incomplete state and not everything works yet.

Install

npm install --save @onflow/fcl

You will probably also want: @onflow/sdk and @onflow/types

Overview

• fcl.config() (done)
  • fcl.config().put(key, value) (done)
  • fcl.config().get(key) (done)
  • fcl.config().get(key, fallback) (done)
  • fcl.config().update(key, transform) (done)
  • fcl.config().delete(key) (done)
  • fcl.config().where(regexp) (done)
  • fcl.config().subscribe(callback) (done)
• fcl.authenticate() (wip)
• fcl.unauthenticate() (wip)
• fcl.currentUser() (wip)
  • fcl.currentUser().snapshot() (wip)
  • fcl.currentUser().subscribe(callback) (wip)
  • fcl.currentUser().authorization (wip)
  • fcl.currentUser().payerAuthorization (wip)
  • fcl.currentUser().proposerAuthorization (wip)
  • fcl.currentUser().param(key) (wip)
• fcl.user(addr) (wip)
  • fcl.user(addr).snapshot() (wip)
  • fcl.user(addr).subscribe(callback) (wip)
  • fcl.user(addr).authorization (wip)
  • fcl.user(addr).payerAuthorization (wip)
  • fcl.user(addr).proposerAuthorization (wip)
  • fcl.user(addr).param(key) (wip)
• fcl.transaction(transactionId) (wip)
  • fcl.transaction(transactionId).snapshot() (wip)
  • fcl.transaction(transactionId).subscribe(callback) (wip)
• fcl.events(...) (EARLY VERY UNSTABLE)
  • fcl.events(...).subscribe(callback) (EARLY VERY UNSTABLE)
• fcl.send(builders) (WIP)
  • Configure fcl.send (WIP)
• fcl.decode(response) (WIP)
  • Configure fcl.decode (WIP)
    • Custom qualified decoders (WIP)
    • Custom unqualified decoders (WIP)

Usage

Authentication Example

import React, {useState, useEffect} from "react"
import * as fcl from "@onflow/fcl"

fcl.config()
  .put("challenge.scope", "email+publicKey")

export const Profile = () => {
  const [user, setUser] = useState(null)
  useEffect(() => fcl.currentUser().subscribe(setUser), [])

  if (user == null) return <div>Loading...</div>

  return !user.loggedIn
    ? <div>
        <button onClick={fcl.authenticate}>Sign In</button>
        <button onClick={fcl.authenticate}>Sign Up</button>
      </div>
    : <div>
        <div>
          <img src={user.avatar || "http://placekitten.com/g/100/100"} width="100" height="100"/>
          {user.name || "Anonymous"}
        </div>
        <button onClick={fcl.unauthenticate}>Sign Out</button>
      </div>
}

Transaction Example

import * as fcl from "@onflow/fcl"
import * as sdk from "@onflow/sdk"
import * as six from "@onflow/six" // Comming Soon (Saved Interactions)
import * as t from "@onflow/types"

fcl.config()
  .put("send.node", "https://accessNodeUrl")

const response = await fcl.send([
  sdk.transaction(six.SEND_FLOW_TOKENS),
  sdk.params([
    fcl.user(toAddress).param(),
    sdk.param(amount, t.UFix64),
  ]),
  sdk.payer(fcl.currentUser().payerAuthorization),
  sdk.proposer(fcl.currentUser().proposerAuthorization),
  sdk.authorizations([
    fcl.currentUser().authorization
  ]),
])

const unsub = fcl.transaction(response).subscribe(status => {
  if (sdk.isSealed(status)) unsub()
  console.log(status)
})

Script

import * as fcl from "@onflow/fcl"
import * as sdk from "@onflow/sdk"
import * as t from "@onflow/types"

fcl.config()
  .put("decoder.SomeNFT", d => new SomeToken(d))

// query for onchain nfts
const response = await fcl.send([
  sdk.script`
    import SomeNFT, getAllForAddress from 0x....

    pub fun main(addr: Address): @[SomeNFT] {
      let nfts: [SomeNFT] = getAllForAddress(addr: Address)
      return nfts
    }
  `,
  sdk.params([
    fcl.currentUser().param()
  ])
])

const results = await fcl.decode(response)