-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add WalletConnect confguration for FCL (#813)
- Loading branch information
Showing
5 changed files
with
198 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,50 +13,51 @@ Values only need to be set once. We recomend doing this once and as early in the | |
| To set a configuation value, the `put` method on the `config` instance needs to be called, the `put` method returns the `config` instance so they can be chained. | ||
|
|
||
| ```javascript | ||
| import * as fcl from "@onflow/fcl" | ||
| import * as fcl from '@onflow/fcl'; | ||
|
|
||
| fcl.config() // returns the config instance | ||
| .put("foo", "bar") // configures "foo" to be "bar" | ||
| .put("baz", "buz") // configures "baz" to be "buz" | ||
| fcl | ||
| .config() // returns the config instance | ||
| .put('foo', 'bar') // configures "foo" to be "bar" | ||
| .put('baz', 'buz'); // configures "baz" to be "buz" | ||
| ``` | ||
|
|
||
| ## Getting Configuration Values | ||
|
|
||
| The `config` instance has an asynchronous `get` method. You can also pass it a fallback value incase the configuration state does not include what you are wanting. | ||
|
|
||
| ```javascript | ||
| import * as fcl from "@onflow/fcl" | ||
| import * as fcl from '@onflow/fcl'; | ||
|
|
||
| fcl.config() | ||
| .put("foo", "bar") | ||
| .put("woot", 5) | ||
| .put("rawr", 7) | ||
| fcl.config().put('foo', 'bar').put('woot', 5).put('rawr', 7); | ||
|
|
||
| const FALLBACK = 1 | ||
| const FALLBACK = 1; | ||
|
|
||
| async function addStuff () { | ||
| var woot = await fcl.config().get("woot", FALLBACK) // will be 5 -- set in the config before | ||
| var rawr = await fcl.config().get("rawr", FALLBACK) // will be 7 -- set in the config before | ||
| var hmmm = await fcl.config().get("hmmm", FALLBACK) // will be 1 -- uses fallback because this isnt in the config | ||
| async function addStuff() { | ||
| var woot = await fcl.config().get('woot', FALLBACK); // will be 5 -- set in the config before | ||
| var rawr = await fcl.config().get('rawr', FALLBACK); // will be 7 -- set in the config before | ||
| var hmmm = await fcl.config().get('hmmm', FALLBACK); // will be 1 -- uses fallback because this isnt in the config | ||
|
|
||
| return woot + rawr + hmmm | ||
| return woot + rawr + hmmm; | ||
| } | ||
|
|
||
| addStuff().then(d => console.log(d)) // 13 (5 + 7 + 1) | ||
| addStuff().then((d) => console.log(d)); // 13 (5 + 7 + 1) | ||
| ``` | ||
|
|
||
| ## Common Configuration Keys | ||
|
|
||
| - `accessNode.api` -- Api URL for the Flow Blockchain Access Node you want to be communicating with. | ||
| - `app.detail.title` - **(INTRODUCED `@onflow/[email protected]`)** Your applications title, can be requested by wallets and other services. | ||
| - `app.detail.icon` - **(INTRODUCED `@onflow/[email protected]`)** Url for your applications icon, can be requested by wallets and other services. | ||
| - `app.detail.title` - **(INTRODUCED `@onflow/[email protected]`)** Your applications title, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service. | ||
| - `app.detail.icon` - **(INTRODUCED `@onflow/[email protected]`)** Url for your applications icon, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service. | ||
| - `app.detail.description` - **(INTRODUCED `@onflow/[email protected]`)** Your applications description, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service. | ||
| - `app.detail.url` - **(INTRODUCED `@onflow/[email protected]`)** Your applications url, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service. | ||
| - `challenge.handshake` -- **(DEPRECATED `@onflow/[email protected]`)** Points FCL at the Wallet or Wallet Discovery mechanism. | ||
| - `discovery.wallet` -- **(INTRODUCED `@onflow/[email protected]`)** Points FCL at the Wallet or Wallet Discovery mechanism. | ||
| - `discovery.wallet.method` -- Describes which service strategy a wallet should use: `IFRAME/RPC`, `POP/RPC`, `TAB/RPC`, `HTTP/POST`, `EXT/RPC` | ||
| - `env` -- **(DEPRECATED `@onflow/[email protected]`)** Used in conjunction with stored interactions. Possible values: `local`, `testnet`, `mainnet` | ||
| - `fcl.limit` -- Specifies fallback compute limit if not provided in transaction. Provided as integer. | ||
| - `fcl.limit` -- Specifies fallback compute limit if not provided in transaction. Provided as integer. | ||
| - `flow.network` (recommended) -- **(INTRODUCED `@onflow/[email protected]`)** Used in conjunction with stored interactions and provides FCLCryptoContract address for `testnet` and `mainnet`. Possible values: `local`, `testnet`, `mainnet`. | ||
| - `service.OpenID.scopes` - **(INTRODUCED `@onflow/[email protected]`)** Open ID Connect claims for Wallets and OpenID services. | ||
| - `walletconnect.projectId` -- **(INTRODUCED `@onflow/[email protected]`)** Your app's WalletConnect project ID. See [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) to obtain a project ID for your application. | ||
|
|
||
| ## Using Contracts in Scripts and Transactions | ||
|
|
||
|
|
@@ -65,59 +66,66 @@ addStuff().then(d => console.log(d)) // 13 (5 + 7 + 1) | |
| Configuration keys that start with `0x` will be replaced in FCL scripts and transactions, this allows you to write your script or transaction Cadence code once and not have to change it when you point your application at a difference instance of the Flow Blockchain. | ||
|
|
||
| ```javascript | ||
| import * as fcl from "@onflow/fcl" | ||
| import * as fcl from '@onflow/fcl'; | ||
|
|
||
| fcl.config() | ||
| .put("0xFungibleToken", "0xf233dcee88fe0abe") | ||
| fcl.config().put('0xFungibleToken', '0xf233dcee88fe0abe'); | ||
|
|
||
| async function myScript () { | ||
| return fcl.send([ | ||
| fcl.script` | ||
| async function myScript() { | ||
| return fcl | ||
| .send([ | ||
| fcl.script` | ||
| import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration | ||
| access(all) fun main() { /* Rest of the script goes here */ } | ||
| ` | ||
| ]).then(fcl.decode) | ||
| `, | ||
| ]) | ||
| .then(fcl.decode); | ||
| } | ||
|
|
||
| async function myTransaction () { | ||
| return fcl.send([ | ||
| fcl.transaction` | ||
| async function myTransaction() { | ||
| return fcl | ||
| .send([ | ||
| fcl.transaction` | ||
| import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration | ||
| transaction { /* Rest of the transaction goes here */ } | ||
| ` | ||
| ]).then(fcl.decode) | ||
| `, | ||
| ]) | ||
| .then(fcl.decode); | ||
| } | ||
| ``` | ||
|
|
||
| #### Example | ||
|
|
||
| ```javascript | ||
| import * as fcl from "@onflow/fcl" | ||
|
|
||
| fcl.config() | ||
| .put("flow.network", "testnet") | ||
| .put("accessNode.api", "https://rest-testnet.onflow.org") | ||
| .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn") | ||
| .put("app.detail.title", "Test Harness") | ||
| .put("app.detail.icon", "https://i.imgur.com/r23Zhvu.png") | ||
| .put("0xFlowToken", "0x7e60df042a9c0868") | ||
| import * as fcl from '@onflow/fcl'; | ||
|
|
||
| fcl | ||
| .config() | ||
| .put('flow.network', 'testnet') | ||
| .put('accessNode.api', 'https://rest-testnet.onflow.org') | ||
| .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn') | ||
| .put('walletconnect.projectId', 'YOUR_PROJECT_ID') | ||
| .put('app.detail.title', 'Test Harness') | ||
| .put('app.detail.icon', 'https://i.imgur.com/r23Zhvu.png') | ||
| .put('app.detail.description', 'A test harness for FCL') | ||
| .put('app.detail.url', 'https://myapp.com') | ||
| .put('0xFlowToken', '0x7e60df042a9c0868'); | ||
| ``` | ||
|
|
||
| ### Using Flow.json | ||
|
|
||
| A simpler way to import contracts in scripts and transactions is to use the `config.load` method to ingest your contracts from your `flow.json` file. This keeps the import syntax unified across tools and lets FCL figure out which address to use for what network based on the network provided in config. To use `config.load` you must first import your `flow.json` file and then pass it to `config.load` as a parameter. | ||
|
|
||
| ```javascript | ||
| import { config } from '@onflow/fcl' | ||
| import flowJSON from '../flow.json' | ||
| import { config } from '@onflow/fcl'; | ||
| import flowJSON from '../flow.json'; | ||
|
|
||
| config({ | ||
| 'flow.network': 'testnet', | ||
| 'accessNode.api': 'https://rest-testnet.onflow.org', | ||
| 'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`, | ||
| }).load({ flowJSON }) | ||
| }).load({ flowJSON }); | ||
| ``` | ||
|
|
||
| Let's say your `flow.json` file looks like this: | ||
|
|
@@ -138,4 +146,4 @@ import "HelloWorld" | |
|
|
||
| FCL will automatically replace the contract name with the address for the network you are using. | ||
|
|
||
| > Note: never put private keys in your `flow.json`. You should use the [key/location syntax](../../flow-cli/flow.json/security.md) to separate your keys into a separate git ignored file. | ||
| > Note: never put private keys in your `flow.json`. You should use the [key/location syntax](../../flow-cli/flow.json/security.md) to separate your keys into a separate git ignored file. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.