CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-tools/clients/fcl-js/api" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.6.3"> <title data-rh="true">Flow Client Library (FCL) API Reference | Flow Developer Portal</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" property="og:url" content="https://developers.flow.com/tools/clients/fcl-js/api"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" name="twitter:image" content="https://developers.flow.com/img/flow-docs-og-1200-630.png"><meta data-rh="true" property="og:image" content="https://developers.flow.com/img/flow-docs-og-1200-630.png"><meta data-rh="true" property="og:image:type" content="image/png"><meta data-rh="true" property="og:image:width" content="1200"><meta data-rh="true" property="og:image:height" content="630"><meta data-rh="true" property="og:type" content="website"><meta data-rh="true" property="og:logo" content="https://developers.flow.com/img/flow-docs-logo-light.png"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Flow Client Library (FCL) API Reference | Flow Developer Portal"><meta data-rh="true" name="description" content="For release updates, see the repo"><meta data-rh="true" property="og:description" content="For release updates, see the repo"><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://developers.flow.com/tools/clients/fcl-js/api"><link data-rh="true" rel="alternate" href="https://developers.flow.com/tools/clients/fcl-js/api" hreflang="en"><link data-rh="true" rel="alternate" href="https://developers.flow.com/tools/clients/fcl-js/api" hreflang="x-default"><link rel="preconnect" href="https://www.google-analytics.com"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-QQ9WYY47HM"></script> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-QQ9WYY47HM",{anonymize_ip:!0})</script> <link rel="search" type="application/opensearchdescription+xml" title="Flow Developer Portal" href="/opensearch.xml"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css" integrity="sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM" crossorigin="anonymous"> <script src="/mixpanel.js" async onload="if ('776159d170484f49f19c3c2f7339f297' && '776159d170484f49f19c3c2f7339f297' !== 'undefined') { window.mixpanel.init('776159d170484f49f19c3c2f7339f297'); const viwedPayload = { 'Page Name': document.title, 'Page URL': window.location.pathname, } window.mixpanel.track('Page Viewed', viwedPayload); const playUrl = 'play.flow.com'; const links = document.querySelectorAll('a') || []; const isPlayPage = Array.from(links).some((link) => link.href.includes(playUrl)); if (isPlayPage) { window.mixpanel.track('Play Page Viewed', viwedPayload); } window.document.addEventListener('click', function (event) { var target = event.target; // Check if the clicked element is a link with an href attribute if (target.tagName === 'A' && target.hasAttribute('href')) { if (window.mixpanel) { const payload = { href: target.getAttribute('href'), id: target.id, class: target.className, } window.mixpanel.track('Link clicked', payload); const isPlay = payload.href.includes('play.flow.com'); if (isPlay) { window.mixpanel.track('Play Link clicked', payload); } } } }); }"></script> <script src="/hotjar.js" async></script><link rel="stylesheet" href="/assets/css/styles.5b5912db.css"> <script src="/assets/js/runtime~main.a87c5f05.js" defer="defer"></script> <script src="/assets/js/main.1139cb57.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"dark")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/flow-docs-logo-dark.png" alt="Flow Developer Portal Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/flow-docs-logo-light.png" alt="Flow Developer Portal Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a><a class="navbar__item navbar__link" href="/build/flow">Cadence</a><a class="navbar__item navbar__link" href="/evm/about">EVM</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/tools/flow-cli">Tools</a><a class="navbar__item navbar__link" href="/networks/flow-networks">Networks</a><a class="navbar__item navbar__link" href="/ecosystem">Ecosystem</a><a class="navbar__item navbar__link" href="/growth">Growth</a><a class="navbar__item navbar__link" href="/tutorials">Tutorials</a></div><div class="navbar__items navbar__items--right"><button class="inline-flex items-center justify-center font-semibold text-center border transition duration-200 cursor-pointer font-display text-sm px-4 py-2 rounded-md gap-2 bg-black text-white border-transparent hover:bg-gray-800 hover:text-white active:bg-gray-900 active:text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 dark:hover:text-black dark:active:bg-gray-200 dark:active:text-black mr-2">Sign In</button><a href="https://github.com/onflow" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link h-8 desktop:p-1"><img src="" alt="GitHub" id="navbar-github" class="box-content h-32 w-32"><span class="p-2 desktop:hidden">Github</span></a><a href="https://discord.gg/flow" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link h-8 desktop:p-1"><img src="" alt="Discord" id="navbar-discord" class="box-content h-32 w-32"><span class="p-2 desktop:hidden">Discord</span></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently dark mode)" aria-label="Switch between dark and light mode (currently dark mode)" aria-live="polite" aria-pressed="true"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/tools">Tools</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/tools/error-codes">Error Codes</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/tools/flow-cli">Flow CLI</a><button aria-label="Expand sidebar category 'Flow CLI'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/tools/emulator">Flow Emulator</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" href="/tools/clients">Clients</a><button aria-label="Collapse sidebar category 'Clients'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" tabindex="0" href="/tools/clients/fcl-js">Flow Client Library (FCL)</a><button aria-label="Collapse sidebar category 'Flow Client Library (FCL)'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/tools/clients/fcl-js/api">FCL Reference</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/sdk-guidelines">SDK Reference</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/authentication">Authentication</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/configure-fcl">How to Configure FCL</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/tools/clients/fcl-js/cross-vm">Cross VM Packages</a><button aria-label="Expand sidebar category 'Cross VM Packages'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/discovery">Wallet Discovery</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/installation">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/interaction-templates">Interaction Templates</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/proving-authentication">Proving Ownership of a Flow Account</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/scripts">Scripts</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/transactions">Transactions</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/user-signatures">Signing and Verifying Arbitrary Data</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/tools/clients/fcl-js/wallet-connect">WalletConnect 2.0 Manual Configuration</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/tools/clients/flow-go-sdk">Flow Go SDK</a><button aria-label="Expand sidebar category 'Flow Go SDK'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/tools/flow-dev-wallet">Flow Dev Wallet</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/tools/vscode-extension">Cadence VS Code Extension</a><button aria-label="Expand sidebar category 'Cadence VS Code Extension'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" href="/tools/wallet-provider-spec">Wallet Provider Spec</a><button aria-label="Expand sidebar category 'Wallet Provider Spec'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/tools/clients"><span itemprop="name">Clients</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/tools/clients/fcl-js"><span itemprop="name">Flow Client Library (FCL)</span></a><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">FCL Reference</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><style>[data-ch-theme="nord"] { --ch-t-colorScheme: dark;--ch-t-foreground: #d8dee9ff;--ch-t-background: #2e3440ff;--ch-t-lighter-inlineBackground: #2e3440e6;--ch-t-editor-background: #2e3440;--ch-t-editor-foreground: #d8dee9;--ch-t-editor-lineHighlightBackground: #3b4252;--ch-t-editor-rangeHighlightBackground: #434c5e52;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #434c5ecc;--ch-t-focusBorder: #3b4252;--ch-t-tab-activeBackground: #3b4252;--ch-t-tab-activeForeground: #d8dee9;--ch-t-tab-inactiveBackground: #2e3440;--ch-t-tab-inactiveForeground: #d8dee966;--ch-t-tab-border: #3b425200;--ch-t-tab-activeBorder: #88c0d000;--ch-t-editorGroup-border: #3b425201;--ch-t-editorGroupHeader-tabsBackground: #2e3440;--ch-t-editorLineNumber-foreground: #4c566a;--ch-t-input-background: #3b4252;--ch-t-input-foreground: #d8dee9;--ch-t-input-border: #3b4252;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #2e3440;--ch-t-sideBar-foreground: #d8dee9;--ch-t-sideBar-border: #3b4252;--ch-t-list-activeSelectionBackground: #88c0d0;--ch-t-list-activeSelectionForeground: #2e3440;--ch-t-list-hoverBackground: #3b4252;--ch-t-list-hoverForeground: #eceff4; }</style> <header><h1>Flow Client Library (FCL) API Reference</h1></header> <blockquote> <p>For release updates, <a href="https://github.com/onflow/fcl-js/releases" target="_blank" rel="noopener noreferrer">see the repo</a></p> </blockquote> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="configuration">Configuration<a href="#configuration" class="hash-link" aria-label="Direct link to Configuration" title="Direct link to Configuration"></a></h2> <p>FCL has a mechanism that lets you configure various aspects of FCL. When you move from one instance of the Flow Blockchain to another (Local Emulator to Testnet to Mainnet) the only thing you should need to change for your FCL implementation is your configuration.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setting-configuration-values">Setting Configuration Values<a href="#setting-configuration-values" class="hash-link" aria-label="Direct link to Setting Configuration Values" title="Direct link to Setting Configuration Values"></a></h3> <p>Values only need to be set once. We recommend doing this once and as early in the life cycle as possible. To set a configuration value, the <code>put</code> method on the <code>config</code> instance needs to be called, the <code>put</code> method returns the <code>config</code> instance so they can be chained.</p> <p>Alternatively, you can set the config by passing a JSON object directly.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> .config() // returns the config instance</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> .put('foo', 'bar') // configures "foo" to be "bar"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> .put('baz', 'buz'); // configures "baz" to be "buz"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>// OR</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>fcl.config({</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> foo: 'bar',</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> baz: 'buz',</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getting-configuration-values">Getting Configuration Values<a href="#getting-configuration-values" class="hash-link" aria-label="Direct link to Getting Configuration Values" title="Direct link to Getting Configuration Values"></a></h3> <p>The <code>config</code> instance has an <strong>asynchronous</strong> <code>get</code> method. You can also pass it a fallback value.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>fcl.config().put('foo', 'bar').put('woot', 5).put('rawr', 7);</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>const FALLBACK = 1;</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>async function addStuff() {</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> var woot = await fcl.config().get('woot', FALLBACK); // will be 5 -- set in the config before</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> var rawr = await fcl.config().get('rawr', FALLBACK); // will be 7 -- set in the config before</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> var hmmm = await fcl.config().get('hmmm', FALLBACK); // will be 1 -- uses fallback because this isnt in the config</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> return woot + rawr + hmmm;</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>addStuff().then((d) => console.log(d)); // 13 (5 + 7 + 1)</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="common-configuration-keys">Common Configuration Keys<a href="#common-configuration-keys" class="hash-link" aria-label="Direct link to Common Configuration Keys" title="Direct link to Common Configuration Keys"></a></h3> <table><thead><tr><th>Name</th><th>Example</th><th>Description</th></tr></thead><tbody><tr><td><code>accessNode.api</code> <strong>(required)</strong></td><td><code>https://rest-testnet.onflow.org</code></td><td>API URL for the Flow Blockchain Access Node you want to be communicating with. See all available access node endpoints <a href="https://developers.onflow.org/http-api/" target="_blank" rel="noopener noreferrer">here</a>.</td></tr><tr><td><code>app.detail.title</code></td><td><code>Cryptokitties</code></td><td>Your applications title, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service.</td></tr><tr><td><code>app.detail.icon</code></td><td><code>https://fcl-discovery.onflow.org/images/blocto.png</code></td><td>Url for your applications icon, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service.</td></tr><tr><td><code>app.detail.description</code></td><td><code>Cryptokitties is a blockchain game</code></td><td>Your applications description, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service.</td></tr><tr><td><code>app.detail.url</code></td><td><code>https://cryptokitties.co</code></td><td>Your applications url, can be requested by wallets and other services. Used by WalletConnect plugin & Wallet Discovery service.</td></tr><tr><td><code>challenge.handshake</code></td><td><strong>DEPRECATED</strong></td><td>Use <code>discovery.wallet</code> instead.</td></tr><tr><td><code>discovery.authn.endpoint</code></td><td><code>https://fcl-discovery.onflow.org/api/testnet/authn</code></td><td>Endpoint for alternative configurable Wallet Discovery mechanism. Read more on <a href="#discovery">discovery</a></td></tr><tr><td><code>discovery.wallet</code> <strong>(required)</strong></td><td><code>https://fcl-discovery.onflow.org/testnet/authn</code></td><td>Points FCL at the Wallet or Wallet Discovery mechanism.</td></tr><tr><td><code>discovery.wallet.method</code></td><td><code>IFRAME/RPC</code>, <code>POP/RPC</code>, <code>TAB/RPC</code>, <code>HTTP/POST</code>, or <code>EXT/RPC</code></td><td>Describes which service strategy a wallet should use.</td></tr><tr><td><code>fcl.limit</code></td><td><code>100</code></td><td>Specifies fallback compute limit if not provided in transaction. Provided as integer.</td></tr><tr><td><code>flow.network</code> <strong>(recommended)</strong></td><td><code>testnet</code></td><td>Used in conjunction with stored interactions and provides FCLCryptoContract address for <code>testnet</code> and <code>mainnet</code>. Possible values: <code>local</code>, <code>testnet</code>, <code>mainnet</code>.</td></tr><tr><td><code>walletconnect.projectId</code></td><td><code>YOUR_PROJECT_ID</code></td><td>Your app's WalletConnect project ID. See <a href="https://cloud.walletconnect.com/sign-in" target="_blank" rel="noopener noreferrer">WalletConnect Cloud</a> to obtain a project ID for your application.</td></tr><tr><td><code>walletconnect.disableNotifications</code></td><td><code>false</code></td><td>Optional flag to disable pending WalletConnect request notifications within the application's UI.</td></tr></tbody></table> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="using-contracts-in-scripts-and-transactions">Using Contracts in Scripts and Transactions<a href="#using-contracts-in-scripts-and-transactions" class="hash-link" aria-label="Direct link to Using Contracts in Scripts and Transactions" title="Direct link to Using Contracts in Scripts and Transactions"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="address-replacement">Address Replacement<a href="#address-replacement" class="hash-link" aria-label="Direct link to Address Replacement" title="Direct link to Address Replacement"></a></h3> <p>Configuration keys that start with <code>0x</code> 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.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>fcl.config().put('0xFungibleToken', '0xf233dcee88fe0abe');</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>async function myScript() {</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> return fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> fcl.script`</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main() { /* Rest of the script goes here */ }</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>async function myTransaction() {</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> return fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> fcl.transaction`</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> transaction { /* Rest of the transaction goes here */ }</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .config()</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('flow.network', 'testnet')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('walletconnect.projectId', 'YOUR_PROJECT_ID')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('accessNode.api', 'https://rest-testnet.onflow.org')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('app.detail.title', 'Test Harness')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('app.detail.icon', 'https://i.imgur.com/r23Zhvu.png')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('app.detail.description', 'A test harness for FCL')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('app.detail.url', 'https://myapp.com')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('service.OpenID.scopes', 'email email_verified name zoneinfo')</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> .put('0xFlowToken', '0x7e60df042a9c0868');</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="using-flowjson-for-contract-imports">Using <code>flow.json</code> for Contract Imports<a href="#using-flowjson-for-contract-imports" class="hash-link" aria-label="Direct link to using-flowjson-for-contract-imports" title="Direct link to using-flowjson-for-contract-imports"></a></h3> <p>A simpler and more flexible way to manage contract imports in scripts and transactions is by using the <code>config.load</code> method in FCL. This lets you load contract configurations from a <code>flow.json</code> file, keeping your import syntax clean and allowing FCL to pick the correct contract addresses based on the network you're using.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="setting-up">Setting Up<a href="#setting-up" class="hash-link" aria-label="Direct link to Setting Up" title="Direct link to Setting Up"></a></h3> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="1-define-your-contracts-in-flowjson">1. Define Your Contracts in <code>flow.json</code><a href="#1-define-your-contracts-in-flowjson" class="hash-link" aria-label="Direct link to 1-define-your-contracts-in-flowjson" title="Direct link to 1-define-your-contracts-in-flowjson"></a></h4> <p>Here’s an example of a <code>flow.json</code> file with aliases for multiple networks:</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span>{</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> "contracts": {</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> "HelloWorld": {</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> "source": "./cadence/contracts/HelloWorld.cdc",</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> "aliases": {</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> "testnet": "0x1cf0e2f2f715450",</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> "mainnet": "0xf8d6e0586b0a20c7"</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <ul> <li><strong><code>source</code></strong>: Points to the contract file in your project.</li> <li><strong><code>aliases</code></strong>: Maps each network to the correct contract address.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="2-configure-fcl">2. Configure FCL<a href="#2-configure-fcl" class="hash-link" aria-label="Direct link to 2. Configure FCL" title="Direct link to 2. Configure FCL"></a></h4> <p>Load the <code>flow.json</code> file and set up FCL to use it:</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import { config } from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import flowJSON from '../flow.json';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>config({</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'flow.network': 'testnet', // Choose your network, e.g., testnet or mainnet</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'accessNode.api': 'https://rest-testnet.onflow.org', // Access node for the network</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`, // Wallet discovery</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}).load({ flowJSON });</span></div></div><br></code></div></div> <p>With this setup, FCL will automatically use the correct contract address based on the selected network (e.g., <code>testnet</code> or <code>mainnet</code>).</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="3-use-contract-names-in-scripts-and-transactions">3. Use Contract Names in Scripts and Transactions<a href="#3-use-contract-names-in-scripts-and-transactions" class="hash-link" aria-label="Direct link to 3. Use Contract Names in Scripts and Transactions" title="Direct link to 3. Use Contract Names in Scripts and Transactions"></a></h4> <p>After setting up <code>flow.json</code>, you can import contracts by name in your Cadence scripts or transactions:</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import "HelloWorld"</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>access(all) fun main(): String {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> return HelloWorld.sayHello()</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <p>FCL replaces <code>"HelloWorld"</code> with the correct address from the <code>flow.json</code> configuration.</p> <blockquote> <p><strong>Note</strong>: Don’t store private keys in your <code>flow.json</code>. Instead, use the <a href="/tools/flow-cli/flow.json/security">key/location syntax</a> to keep sensitive keys in a separate, <code>.gitignore</code>-protected file.</p> </blockquote> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="wallet-interactions">Wallet Interactions<a href="#wallet-interactions" class="hash-link" aria-label="Direct link to Wallet Interactions" title="Direct link to Wallet Interactions"></a></h2> <p>These methods allows dapps to interact with FCL compatible wallets in order to authenticate the user and authorize transactions on their behalf.</p> <blockquote> <p>⚠️These methods are <strong>async</strong>.</p> </blockquote> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="authenticate"><code>authenticate</code><a href="#authenticate" class="hash-link" aria-label="Direct link to authenticate" title="Direct link to authenticate"></a></h3> <blockquote> <p>⚠️<strong>This method can only be used in web browsers.</strong></p> </blockquote> <p>Calling this method will authenticate the current user via any wallet that supports FCL. Once called, FCL will initiate communication with the configured <code>discovery.wallet</code> endpoint which lets the user select a wallet to authenticate with. Once the wallet provider has authenticated the user, FCL will set the values on the <a href="#currentuserobject">current user</a> object for future use and authorization.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note">Note<a href="#note" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️<code>discovery.wallet</code> value <strong>must</strong> be set in the configuration before calling this method. See <a href="#configuration">FCL Configuration</a>.</p> <p>📣 The default discovery endpoint will open an iframe overlay to let the user choose a supported wallet.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .config()</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .put('accessNode.api', 'https://rest-testnet.onflow.org')</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn');</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// anywhere on the page</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.authenticate();</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-1">Note<a href="#note-1" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️ <code>authenticate</code> can also take a service returned from <a href="#discovery">discovery</a> with <code>fcl.authenticate({ service })</code>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="unauthenticate"><code>unauthenticate</code><a href="#unauthenticate" class="hash-link" aria-label="Direct link to unauthenticate" title="Direct link to unauthenticate"></a></h3> <blockquote> <p>⚠️<strong>This method can only be used in web browsers.</strong></p> </blockquote> <p>Logs out the current user and sets the values on the <a href="#currentuserobject">current user</a> object to null.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-2">Note<a href="#note-2" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️The current user must be authenticated first.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-1">Usage<a href="#usage-1" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.config().put('accessNode.api', 'https://rest-testnet.onflow.org');</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// first authenticate to set current user</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.authenticate();</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// ... somewhere else & sometime later</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.unauthenticate();</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// fcl.currentUser.loggedIn === null</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="reauthenticate"><code>reauthenticate</code><a href="#reauthenticate" class="hash-link" aria-label="Direct link to reauthenticate" title="Direct link to reauthenticate"></a></h3> <blockquote> <p>⚠️<strong>This method can only be used in web browsers.</strong></p> </blockquote> <p>A <strong>convenience method</strong> that calls <a href="#unauthenticate"><code>fcl.unauthenticate()</code></a> and then <a href="#authenticate"><code>fcl.authenticate()</code></a> for the current user.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-3">Note<a href="#note-3" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️The current user must be authenticated first.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-2">Usage<a href="#usage-2" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// first authenticate to set current user</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.authenticate();</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// ... somewhere else & sometime later</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.reauthenticate();</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// logs out user and opens up login/sign-up flow</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="signup"><code>signUp</code><a href="#signup" class="hash-link" aria-label="Direct link to signup" title="Direct link to signup"></a></h3> <blockquote> <p>⚠️<strong>This method can only be used in web browsers.</strong></p> </blockquote> <p>A <strong>convenience method</strong> that calls and is equivalent to <a href="#authenticate"><code>fcl.authenticate()</code></a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="login"><code>logIn</code><a href="#login" class="hash-link" aria-label="Direct link to login" title="Direct link to login"></a></h3> <blockquote> <p>⚠️<strong>This method can only be used in web browsers.</strong></p> </blockquote> <p>A <strong>convenience method</strong> that calls and is equivalent to <a href="#authenticate"><code>fcl.authenticate()</code></a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="authz"><code>authz</code><a href="#authz" class="hash-link" aria-label="Direct link to authz" title="Direct link to authz"></a></h3> <p>A <strong>convenience method</strong> that produces the needed authorization details for the current user to submit transactions to Flow. It defines a signing function that connects to a user's wallet provider to produce signatures to submit transactions.</p> <blockquote> <p>📣 You can replace this function with your own <a href="#authorization-function">authorization function</a> if needed.</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns">Returns<a href="#returns" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#authorizationobject">AuthorizationObject</a></td><td>An object containing the necessary details from the current user to authorize a transaction in any role.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-3">Usage<a href="#usage-3" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <p><strong>Note:</strong> The default values for <code>proposer</code>, <code>payer</code>, and <code>authorizations</code> are already <code>fcl.authz</code> so there is no need to include these parameters, it is shown only for example purposes. See more on <a href="/build/basics/transactions">signing roles</a>.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>// login somewhere before</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>fcl.authenticate();</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>// once logged in authz will produce values</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>console.log(fcl.authz);</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>// prints {addr, signingFunction, keyId, sequenceNum} from the current authenticated user.</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>const txId = await fcl.mutate({</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> cadence: `</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> import Profile from 0xba1132bc08f82fe2</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> </span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> transaction(name: String) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> prepare(account: auth(BorrowValue) &Account) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> account.storage.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> args: (arg, t) => [arg('myName', t.String)],</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> proposer: fcl.authz, // optional - default is fcl.authz</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> payer: fcl.authz, // optional - default is fcl.authz</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span> authorizations: [fcl.authz], // optional - default is [fcl.authz]</span></div></div><div><span class="ch-code-line-number">_<!-- -->22</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br></code></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="current-user">Current User<a href="#current-user" class="hash-link" aria-label="Direct link to Current User" title="Direct link to Current User"></a></h2> <p>Holds the <a href="#currentuserobject">current user</a>, if set, and offers a set of functions to manage the authentication and authorization of the user.</p> <blockquote> <p>⚠️<strong>The following methods can only be used in web browsers.</strong></p> </blockquote> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentusersubscribe"><code>currentUser.subscribe</code><a href="#currentusersubscribe" class="hash-link" aria-label="Direct link to currentusersubscribe" title="Direct link to currentusersubscribe"></a></h3> <p>The callback passed to subscribe will be called when the user authenticates and un-authenticates, making it easy to update the UI accordingly.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments">Arguments<a href="#arguments" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th></th></tr></thead><tbody><tr><td><code>callback</code></td><td>function</td><td>The callback will be called with the <a href="#currentuserobject">current user</a> as the first argument when the current user is set or removed.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-4">Usage<a href="#usage-4" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>import React, { useState, useEffect } from 'react';</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>export function AuthCluster() {</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> const [user, setUser] = useState({ loggedIn: null });</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> useEffect(() => fcl.currentUser.subscribe(setUser), []); // sets the callback for FCL to use</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> if (user.loggedIn) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> return (</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <div></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <span>{user?.addr ?? 'No Address'}</span></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <button onClick={fcl.unauthenticate}>Log Out</button> {/* once logged out in setUser(user) will be called */}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> </div></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> );</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> } else {</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> return (</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <div></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <button onClick={fcl.logIn}>Log In</button>{' '}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> {/* once logged in setUser(user) will be called */}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <button onClick={fcl.signUp}>Sign Up</button> {/* once signed up, setUser(user) will be called */}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> </div></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> );</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentusersnapshot"><code>currentUser.snapshot</code><a href="#currentusersnapshot" class="hash-link" aria-label="Direct link to currentusersnapshot" title="Direct link to currentusersnapshot"></a></h3> <p>Returns the <a href="#currentuserobject">current user</a> object. This is the same object that is set and available on <a href="#currentusersubscribe"><code>fcl.currentUser.subscribe(callback)</code></a>.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-5">Usage<a href="#usage-5" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// returns the current user object</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const user = fcl.currentUser.snapshot();</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// subscribes to the current user object and logs to console on changes</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.currentUser.subscribe(console.log);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentuserauthenticate"><code>currentUser.authenticate</code><a href="#currentuserauthenticate" class="hash-link" aria-label="Direct link to currentuserauthenticate" title="Direct link to currentuserauthenticate"></a></h3> <p>Equivalent to <code>fcl.authenticate</code>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentuserunauthenticate"><code>currentUser.unauthenticate</code><a href="#currentuserunauthenticate" class="hash-link" aria-label="Direct link to currentuserunauthenticate" title="Direct link to currentuserunauthenticate"></a></h3> <p>Equivalent to <code>fcl.unauthenticate</code>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentuserauthorization"><code>currentUser.authorization</code><a href="#currentuserauthorization" class="hash-link" aria-label="Direct link to currentuserauthorization" title="Direct link to currentuserauthorization"></a></h3> <p>Equivalent to <code>fcl.authz</code></p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentusersignusermessage"><code>currentUser.signUserMessage</code><a href="#currentusersignusermessage" class="hash-link" aria-label="Direct link to currentusersignusermessage" title="Direct link to currentusersignusermessage"></a></h3> <p>A method to use allowing the user to personally sign data via FCL Compatible Wallets/Services.</p> <blockquote> <p>⚠️ This method requires the current user's wallet to support a signing service endpoint. Currently, only Blocto is compatible with this feature by default.</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-1">Arguments<a href="#arguments-1" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>message</code></td><td>string <strong>(required)</strong></td><td>A hexadecimal string to be signed</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-1">Returns<a href="#returns-1" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>Array</code></td><td>An Array of <a href="https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/draft-v2.md#compositesignature" target="_blank" rel="noopener noreferrer">CompositeSignatures</a>: <!-- -->signature</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-6">Usage<a href="#usage-6" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>export const signMessage = async () => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> const MSG = Buffer.from('FOO').toString('hex');</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> try {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> return await currentUser.signUserMessage(MSG);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> } catch (error) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> console.log(error);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br></code></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="discovery">Discovery<a href="#discovery" class="hash-link" aria-label="Direct link to Discovery" title="Direct link to Discovery"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="discovery-1"><code>discovery</code><a href="#discovery-1" class="hash-link" aria-label="Direct link to discovery-1" title="Direct link to discovery-1"></a></h3> <p>Discovery abstracts away code so that developers don't have to deal with the discovery of Flow compatible wallets, integration, or authentication. Using <code>discovery</code> from FCL allows dapps to list and authenticate with wallets while having full control over the UI. Common use cases for this are login or registration pages.</p> <p>(Alternatively, if you don't need control over your UI you can continue to use the <code>discovery.wallet</code> config value documented in the <a href="/build/getting-started/fcl-quickstart">Quickstart</a> for the simplest configuration.)</p> <blockquote> <p>⚠️<strong>The following methods can only be used in web browsers.</strong></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-4">Note<a href="#note-4" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️<code>discovery.authn.endpoint</code> value <strong>must</strong> be set in the configuration before calling this method. See <a href="#configuration">FCL Configuration</a>.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="suggested-configuration">Suggested Configuration<a href="#suggested-configuration" class="hash-link" aria-label="Direct link to Suggested Configuration" title="Direct link to Suggested Configuration"></a></h3> <table><thead><tr><th>Environment</th><th>Example</th></tr></thead><tbody><tr><td>Mainnet</td><td><code>https://fcl-discovery.onflow.org/api/authn</code></td></tr><tr><td>Testnet</td><td><code>https://fcl-discovery.onflow.org/api/testnet/authn</code></td></tr></tbody></table> <p>If the Discovery endpoint is set in config, then you can iterate through authn services and pass the chosen service to <a href="#authenticate">authenticate</a> to authenticate a user.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-7">Usage<a href="#usage-7" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>import './config';</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>import { useState, useEffect } from 'react';</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>function Component() {</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> const [wallets, setWallets] = useState([]);</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> useEffect(</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> () => fcl.discovery.authn.subscribe((res) => setWallets(res.results)),</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> [],</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> );</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> return (</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <div></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> {wallets.map((wallet) => (</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> <button</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> key={wallet.provider.address}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> onClick={() => fcl.authenticate({ service: wallet })}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> ></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> Login with {wallet.provider.name}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> </button></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> ))}</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> </div></span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span> );</span></div></div><div><span class="ch-code-line-number">_<!-- -->24</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="authn">authn<a href="#authn" class="hash-link" aria-label="Direct link to authn" title="Direct link to authn"></a></h3> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="more-configuration">More Configuration<a href="#more-configuration" class="hash-link" aria-label="Direct link to More Configuration" title="Direct link to More Configuration"></a></h4> <p>By default, limited functionality services or services that require developer registration, like Ledger or Dapper Wallet, require apps to opt-in in order to display to users. To enable opt-in services in an application, use the <code>discovery.authn.include</code> property in your configuration with a value of an array of services you'd like your app to opt-in to displaying for users.</p> <p>Additionally, you can use the <code>discovery.authn.exclude</code> property to exclude any services from being displayed to users.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import { config } from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>config({</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'discovery.authn.endpoint':</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'https://fcl-discovery.onflow.org/api/testnet/authn', // Endpoint set to Testnet</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'discovery.authn.include': ['0x9d2e44203cb13051'], // Ledger wallet address on Testnet set to be included</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'discovery.authn.exclude': ['0x123456789abcdef01'], // Example of excluding a wallet by address</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br></code></div></div> <p><strong>Opt-In Wallet Addresses on Testnet and Mainnet</strong></p> <table><thead><tr><th>Service</th><th>Testnet</th><th>Mainnet</th></tr></thead><tbody><tr><td><code>Dapper Wallet</code></td><td>0x82ec283f88a62e65</td><td>0xead892083b3e2c6c</td></tr><tr><td><code>Ledger</code></td><td>0x9d2e44203cb13051</td><td>0xe5cd26afebe62781</td></tr></tbody></table> <p>For more details on wallets, view the <a href="https://github.com/onflow/fcl-discovery/blob/87e172db85d185882d9fde007c95f08bc2a1cccb/data/services.json" target="_blank" rel="noopener noreferrer">service list here</a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="discoveryauthnsnapshot"><code>discovery.authn.snapshot()</code><a href="#discoveryauthnsnapshot" class="hash-link" aria-label="Direct link to discoveryauthnsnapshot" title="Direct link to discoveryauthnsnapshot"></a></h3> <p>Return a list of <code>authn</code> services.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="discoveryauthnsubscribecallback"><code>discovery.authn.subscribe(callback)</code><a href="#discoveryauthnsubscribecallback" class="hash-link" aria-label="Direct link to discoveryauthnsubscribecallback" title="Direct link to discoveryauthnsubscribecallback"></a></h3> <p>The callback sent to <code>subscribe</code> will be called with a list of <code>authn</code> services.</p> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="on-chain-interactions">On-chain Interactions<a href="#on-chain-interactions" class="hash-link" aria-label="Direct link to On-chain Interactions" title="Direct link to On-chain Interactions"></a></h2> <blockquote> <p>📣 <strong>These methods can be used in browsers and NodeJS.</strong></p> </blockquote> <p>These methods allows dapps to interact directly with the Flow blockchain via a set of functions that currently use the <a href="/networks/access-onchain-data">Access Node API</a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="query-and-mutate-flow-with-cadence">Query and Mutate Flow with Cadence<a href="#query-and-mutate-flow-with-cadence" class="hash-link" aria-label="Direct link to Query and Mutate Flow with Cadence" title="Direct link to Query and Mutate Flow with Cadence"></a></h3> <p>If you want to run arbitrary Cadence scripts on the blockchain, these methods offer a convenient way to do so <strong>without having to build, send, and decode interactions</strong>.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="query"><code>query</code><a href="#query" class="hash-link" aria-label="Direct link to query" title="Direct link to query"></a></h3> <p>Allows you to submit scripts to query the blockchain.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="options">Options<a href="#options" class="hash-link" aria-label="Direct link to Options" title="Direct link to Options"></a></h4> <p><em>Pass in the following as a single object with the following keys.All keys are optional unless otherwise stated.</em></p> <table><thead><tr><th>Key</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>cadence</code></td><td>string <strong>(required)</strong></td><td>A valid cadence script.</td></tr><tr><td><code>args</code></td><td><a href="#argumentfunction">ArgumentFunction</a></td><td>Any arguments to the script if needed should be supplied via a function that returns an array of arguments.</td></tr><tr><td><code>limit</code></td><td>number</td><td>Compute (Gas) limit for query. Read the <a href="/build/basics/fees">documentation about computation cost</a> for information about how computation cost is calculated on Flow.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-2">Returns<a href="#returns-2" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>any</td><td>A JSON representation of the response.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-8">Usage<a href="#usage-8" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>const result = await fcl.query({</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> cadence: `</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main(a: Int, b: Int, addr: Address): Int {</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> log(addr)</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> return a + b</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> args: (arg, t) => [</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> arg(7, t.Int), // a: Int</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> arg(6, t.Int), // b: Int</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> arg('0xba1132bc08f82fe2', t.Address), // addr: Address</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>console.log(result); // 13</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="examples">Examples<a href="#examples" class="hash-link" aria-label="Direct link to Examples" title="Direct link to Examples"></a></h4> <ul> <li><a href="https://gist.github.com/orodio/3bf977a0bd45b990d16fdc1459b129a2" target="_blank" rel="noopener noreferrer">Additional Explanation</a></li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="mutate"><code>mutate</code><a href="#mutate" class="hash-link" aria-label="Direct link to mutate" title="Direct link to mutate"></a></h3> <p>Allows you to submit transactions to the blockchain to potentially mutate the state.</p> <p>⚠️When being used in the browser, <code>fcl.mutate</code> uses the built-in <code>fcl.authz</code> function to produce the authorization (signatures) for the current user. When calling this method from Node.js, you will need to supply your own custom authorization function.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="options-1">Options<a href="#options-1" class="hash-link" aria-label="Direct link to Options" title="Direct link to Options"></a></h4> <p><em>Pass in the following as a single object with the following keys. All keys are optional unless otherwise stated.</em></p> <table><thead><tr><th>Key</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>cadence</code></td><td>string <strong>(required)</strong></td><td>A valid cadence transaction.</td></tr><tr><td><code>args</code></td><td><a href="#argumentfunction">ArgumentFunction</a></td><td>Any arguments to the script if needed should be supplied via a function that returns an array of arguments.</td></tr><tr><td><code>limit</code></td><td>number</td><td>Compute (Gas) limit for query. Read the <a href="/tools/clients/flow-go-sdk#gas-limit">documentation about computation cost</a> for information about how computation cost is calculated on Flow.</td></tr><tr><td><code>proposer</code></td><td><a href="#authorization-function">AuthorizationFunction</a></td><td>The authorization function that returns a valid <a href="#authorizationobject">AuthorizationObject</a> for the <a href="#transactionrolesobject">proposer role</a>.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-3">Returns<a href="#returns-3" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>string</td><td>The transaction ID.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-9">Usage<a href="#usage-9" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>// login somewhere before</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>fcl.authenticate();</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>const txId = await fcl.mutate({</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> cadence: `</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> import Profile from 0xba1132bc08f82fe2</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> </span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> transaction(name: String) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> prepare(account: auth(BorrowValue) &Account) {</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> account.storage.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> args: (arg, t) => [arg('myName', t.String)],</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="examples-1">Examples<a href="#examples-1" class="hash-link" aria-label="Direct link to Examples" title="Direct link to Examples"></a></h4> <ul> <li><a href="https://gist.github.com/orodio/3bf977a0bd45b990d16fdc1459b129a2" target="_blank" rel="noopener noreferrer">Additional explanation</a></li> <li><a href="#authorization-function">Custom authorization function</a></li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="verifyusersignatures-deprecated"><code>verifyUserSignatures</code> (Deprecated)<a href="#verifyusersignatures-deprecated" class="hash-link" aria-label="Direct link to verifyusersignatures-deprecated" title="Direct link to verifyusersignatures-deprecated"></a></h3> <p>Use <code>fcl.AppUtils.verifyUserSignatures</code></p> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="apputils">AppUtils<a href="#apputils" class="hash-link" aria-label="Direct link to AppUtils" title="Direct link to AppUtils"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="apputilsverifyusersignatures"><code>AppUtils.verifyUserSignatures</code><a href="#apputilsverifyusersignatures" class="hash-link" aria-label="Direct link to apputilsverifyusersignatures" title="Direct link to apputilsverifyusersignatures"></a></h3> <p>A method allowing applications to cryptographically verify a message was signed by a user's private key/s. This is typically used with the response from <code>currentUser.signUserMessage</code>.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-5">Note<a href="#note-5" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️ <code>fcl.config.flow.network</code> or options override is required to use this api. See <a href="#configuration">FCL Configuration</a>.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-2">Arguments<a href="#arguments-2" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>message</code></td><td>string <strong>(required)</strong></td><td>A hexadecimal string</td></tr><tr><td><code>compositeSignatures</code></td><td>Array <strong>(required)</strong></td><td>An Array of <code>CompositeSignatures</code></td></tr><tr><td><code>opts</code></td><td>Object <strong>(optional)</strong></td><td><code>opts.fclCryptoContract</code> can be provided to override FCLCryptoContract address for local development</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-4">Returns<a href="#returns-4" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>Boolean</td><td><code>true</code> if verified or <code>false</code></td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-10">Usage<a href="#usage-10" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>const isValid = await fcl.AppUtils.verifyUserSignatures(</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> Buffer.from('FOO').toString('hex'),</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> [</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> {</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> f_type: 'CompositeSignature',</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> f_vsn: '1.0.0',</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> addr: '0x123',</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> keyId: 0,</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> signature: 'abc123',</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> { fclCryptoContract },</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>);</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="examples-2">Examples<a href="#examples-2" class="hash-link" aria-label="Direct link to Examples" title="Direct link to Examples"></a></h4> <ul> <li><a href="https://github.com/onflow/fcl-next-harness" target="_blank" rel="noopener noreferrer">fcl-next-harness</a></li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="apputilsverifyaccountproof"><code>AppUtils.verifyAccountProof</code><a href="#apputilsverifyaccountproof" class="hash-link" aria-label="Direct link to apputilsverifyaccountproof" title="Direct link to apputilsverifyaccountproof"></a></h3> <p>A method allowing applications to cryptographically prove that a user controls an on-chain account. During user authentication, some FCL compatible wallets will choose to support the FCL <code>account-proof</code> service. If a wallet chooses to support this service, and the user approves the signing of message data, they will return <code>account-proof</code> data and a signature(s) that can be used to prove a user controls an on-chain account. See <a href="https://github.com/onflow/fcl-js/blob/master/docs/reference/proving-authentication.mdx" target="_blank" rel="noopener noreferrer">proving-authentication</a> documentaion for more details.</p> <p>⚠️ <code>fcl.config.flow.network</code> or options override is required to use this api. See <a href="#configuration">FCL Configuration</a>.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-3">Arguments<a href="#arguments-3" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>appIdentifier</code></td><td>string <strong>(required)</strong></td><td>A hexadecimal string</td></tr><tr><td><code>accountProofData</code></td><td>Object <strong>(required)</strong></td><td>Object with properties: <br><code>address</code>: <code>string</code> - A Flow account address. <br> <code>nonce</code>: <code>string</code> - A random string in hexadecimal format (minimum 32 bytes in total, i.e 64 hex characters) <br> <code>signatures</code>: <code>Object[]</code> - An array of composite signatures to verify</td></tr><tr><td><code>opts</code></td><td>Object <strong>(optional)</strong></td><td><code>opts.fclCryptoContract</code> can be provided to overide FCLCryptoContract address for local development</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-5">Returns<a href="#returns-5" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>Boolean</td><td><code>true</code> if verified or <code>false</code></td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-11">Usage<a href="#usage-11" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from "@onflow/fcl"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>const accountProofData = {</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> address: "0x123",</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> nonce: "F0123"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> signatures: [{f_type: "CompositeSignature", f_vsn: "1.0.0", addr: "0x123", keyId: 0, signature: "abc123"}],</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>const isValid = await fcl.AppUtils.verifyAccountProof(</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> "AwesomeAppId",</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> accountProofData,</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> {fclCryptoContract}</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>)</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="examples-3">Examples<a href="#examples-3" class="hash-link" aria-label="Direct link to Examples" title="Direct link to Examples"></a></h4> <ul> <li><a href="https://github.com/onflow/fcl-next-harness" target="_blank" rel="noopener noreferrer">fcl-next-harness</a></li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="query-and-mutate-the-blockchain-with-builders">Query and mutate the blockchain with Builders<a href="#query-and-mutate-the-blockchain-with-builders" class="hash-link" aria-label="Direct link to Query and mutate the blockchain with Builders" title="Direct link to Query and mutate the blockchain with Builders"></a></h3> <p>In some cases, you may want to utilize pre-built interactions or build more complex interactions than what the <code>fcl.query</code> and <code>fcl.mutate</code> interface offer. To do this, FCL uses a pattern of building up an interaction with a combination of builders, resolving them, and sending them to the chain.</p> <blockquote> <p>⚠️<strong>Recommendation:</strong> Unless you have a specific use case that require usage of these builders, you should be able to achieve most cases with <code>fcl.query({...options}</code> or <code>fcl.mutate({...options})</code></p> </blockquote> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="send"><code>send</code><a href="#send" class="hash-link" aria-label="Direct link to send" title="Direct link to send"></a></h3> <p>Sends arbitrary scripts, transactions, and requests to Flow.</p> <p>This method consumes an array of <a href="#builders">builders</a> that are to be resolved and sent. The builders required to be included in the array depend on the <a href="#interaction">interaction</a> that is being built.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-6">Note<a href="#note-6" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>⚠️Must be used in conjuction with <a href="#decode"><code>fcl.decode(response)</code></a> to get back correct keys and all values in JSON.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-4">Arguments<a href="#arguments-4" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>builders</code></td><td>[<a href="#builders">Builders</a>]</td><td>See builder functions.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-6">Returns<a href="#returns-6" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#responseobject">ResponseObject</a></td><td>An object containing the data returned from the chain. Should always be decoded with <code>fcl.decode()</code> to get back appropriate JSON keys and values.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-12">Usage<a href="#usage-12" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>// a script only needs to resolve the arguments to the script</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>const response = await fcl.send([fcl.script`${script}`, fcl.args(args)]);</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>// note: response values are encoded, call await fcl.decode(response) to get JSON</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>// a transaction requires multiple 'builders' that need to be resolved prior to being sent to the chain - such as setting the authorizations.</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>const response = await fcl.send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> fcl.transaction`</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> ${transaction}</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> fcl.args(args),</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> fcl.proposer(proposer),</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> fcl.authorizations(authorizations),</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> fcl.payer(payer),</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span> fcl.limit(9999),</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>]);</span></div></div><div><span class="ch-code-line-number">_<!-- -->18</span><div style="display:inline-block;margin-left:16px"><span>// note: response contains several values (Cad)</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="decode"><code>decode</code><a href="#decode" class="hash-link" aria-label="Direct link to decode" title="Direct link to decode"></a></h3> <p>Decodes the response from <code>fcl.send()</code> into the appropriate JSON representation of any values returned from Cadence code.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="note-7">Note<a href="#note-7" class="hash-link" aria-label="Direct link to Note" title="Direct link to Note"></a></h4> <p>📣 To define your own decoder, see <a href="https://github.com/onflow/fcl-js/tree/master/packages/sdk/src/decode" target="_blank" rel="noopener noreferrer"><code>tutorial</code></a>.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-5">Arguments<a href="#arguments-5" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>response</code></td><td><a href="#responseobject">ResponseObject</a></td><td>Should be the response returned from <code>fcl.send([...])</code></td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-7">Returns<a href="#returns-7" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>any</td><td>A JSON representation of the raw string response depending on the cadence code executed.<br> The return value can be a single value and type or an object with multiple types.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-13">Usage<a href="#usage-13" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>// simple script to add 2 numbers</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>const response = await fcl.send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> fcl.script`</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main(int1: Int, int2: Int): Int {</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> return int1 + int2</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span> fcl.args([fcl.arg(1, fcl.t.Int), fcl.arg(2, fcl.t.Int)]),</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>]);</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>const decoded = await fcl.decode(response);</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>assert(3 === decoded);</span></div></div><div><span class="ch-code-line-number">_<!-- -->16</span><div style="display:inline-block;margin-left:16px"><span>assert(typeof decoded === 'number');</span></div></div><br></code></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="builders">Builders<a href="#builders" class="hash-link" aria-label="Direct link to Builders" title="Direct link to Builders"></a></h2> <p>These methods fill out various portions of a transaction or script template in order to build, resolve, and send it to the blockchain. A valid populated template is referred to as an <a href="#interaction">Interaction</a>.</p> <p>⚠️<strong>These methods must be used with <code>fcl.send([...builders]).then(fcl.decode)</code></strong></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="query-builders">Query Builders<a href="#query-builders" class="hash-link" aria-label="Direct link to Query Builders" title="Direct link to Query Builders"></a></h3> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getaccount"><code>getAccount</code><a href="#getaccount" class="hash-link" aria-label="Direct link to getaccount" title="Direct link to getaccount"></a></h3> <p>A builder function that returns the interaction to get an account by address.</p> <p>⚠️Consider using the pre-built interaction <a href="#account"><code>fcl.account(address)</code></a> if you do not need to pair with any other builders.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-6">Arguments<a href="#arguments-6" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>address</code></td><td><a href="#address">Address</a></td><td>Address of the user account with or without a prefix (both formats are supported).</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding">Returns after decoding<a href="#returns-after-decoding" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#account">AccountObject</a></td><td>A JSON representation of a user account.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-14">Usage<a href="#usage-14" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// somewhere in an async function</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// fcl.account is the same as this function</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const getAccount = async (address) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> const account = await fcl.send([fcl.getAccount(address)]).then(fcl.decode);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> return account;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getblock"><code>getBlock</code><a href="#getblock" class="hash-link" aria-label="Direct link to getblock" title="Direct link to getblock"></a></h3> <p>A builder function that returns the interaction to get the latest block.</p> <p>📣 Use with <code>fcl.atBlockId()</code> and <code>fcl.atBlockHeight()</code> when building the interaction to get information for older blocks.</p> <p>⚠️Consider using the pre-built interaction <a href="#getblock"><code>fcl.getblock(isSealed)</code></a> if you do not need to pair with any other builders.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-7">Arguments<a href="#arguments-7" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>isSealed</code></td><td>boolean</td><td>false</td><td>If the latest block should be sealed or not. See <a href="#interaction">block states</a>.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-1">Returns after decoding<a href="#returns-after-decoding-1" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#blockobject">BlockObject</a></td><td>The latest block if not used with any other builders.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-15">Usage<a href="#usage-15" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const latestSealedBlock = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> fcl.getBlock(true), // isSealed = true</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="atblockheight"><code>atBlockHeight</code><a href="#atblockheight" class="hash-link" aria-label="Direct link to atblockheight" title="Direct link to atblockheight"></a></h3> <p>A builder function that returns a partial interaction to a block at a specific height.</p> <p>⚠️Use with other interactions like <a href="#getblock"><code>fcl.getBlock()</code></a> to get a full interaction at the specified block height.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-8">Arguments<a href="#arguments-8" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>blockHeight</code></td><td>number</td><td>The height of the block to execute the interaction at.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-8">Returns<a href="#returns-8" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#interaction">Partial Interaction</a></td><td>A partial interaction to be paired with another interaction such as <code>fcl.getBlock()</code> or <code>fcl.getAccount()</code>.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-16">Usage<a href="#usage-16" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>await fcl.send([fcl.getBlock(), fcl.atBlockHeight(123)]).then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="atblockid"><code>atBlockId</code><a href="#atblockid" class="hash-link" aria-label="Direct link to atblockid" title="Direct link to atblockid"></a></h3> <p>A builder function that returns a partial interaction to a block at a specific block ID.</p> <p>⚠️Use with other interactions like <a href="#getblock"><code>fcl.getBlock()</code></a> to get a full interaction at the specified block ID.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-9">Arguments<a href="#arguments-9" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>blockId</code></td><td>string</td><td>The ID of the block to execute the interaction at.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-9">Returns<a href="#returns-9" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#interaction">Partial Interaction</a></td><td>A partial interaction to be paired with another interaction such as <code>fcl.getBlock()</code> or <code>fcl.getAccount()</code>.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-17">Usage<a href="#usage-17" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>await fcl.send([fcl.getBlock(), fcl.atBlockId('23232323232')]).then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getblockheader"><code>getBlockHeader</code><a href="#getblockheader" class="hash-link" aria-label="Direct link to getblockheader" title="Direct link to getblockheader"></a></h3> <p>A builder function that returns the interaction to get a block header.</p> <p>📣 Use with <code>fcl.atBlockId()</code> and <code>fcl.atBlockHeight()</code> when building the interaction to get information for older blocks.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-2">Returns after decoding<a href="#returns-after-decoding-2" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#blockheaderobject">BlockHeaderObject</a></td><td>The latest block header if not used with any other builders.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-18">Usage<a href="#usage-18" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const latestBlockHeader = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .send([fcl.getBlockHeader()])</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="geteventsatblockheightrange"><code>getEventsAtBlockHeightRange</code><a href="#geteventsatblockheightrange" class="hash-link" aria-label="Direct link to geteventsatblockheightrange" title="Direct link to geteventsatblockheightrange"></a></h3> <p>A builder function that returns all instances of a particular event (by name) within a height range.</p> <p>⚠️The block range provided must be from the current spork.</p> <p>⚠️The block range provided must be 250 blocks or lower per request.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-10">Arguments<a href="#arguments-10" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>eventName</code></td><td><a href="#eventname">EventName</a></td><td>The name of the event.</td></tr><tr><td><code>fromBlockHeight</code></td><td>number</td><td>The height of the block to start looking for events (inclusive).</td></tr><tr><td><code>toBlockHeight</code></td><td>number</td><td>The height of the block to stop looking for events (inclusive).</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-3">Returns after decoding<a href="#returns-after-decoding-3" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#event-object">[EventObject]</a></td><td>An array of events that matched the eventName.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-19">Usage<a href="#usage-19" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span>const events = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> fcl.getEventsAtBlockHeightRange(</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> 'A.7e60df042a9c0868.FlowToken.TokensWithdrawn',</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> 35580624,</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> 35580624,</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->11</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="geteventsatblockids"><code>getEventsAtBlockIds</code><a href="#geteventsatblockids" class="hash-link" aria-label="Direct link to geteventsatblockids" title="Direct link to geteventsatblockids"></a></h3> <p>A builder function that returns all instances of a particular event (by name) within a set of blocks, specified by block ids.</p> <p>⚠️The block range provided must be from the current spork.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-11">Arguments<a href="#arguments-11" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>eventName</code></td><td><a href="#eventname">EventName</a></td><td>The name of the event.</td></tr><tr><td><code>blockIds</code></td><td>number</td><td>The ids of the blocks to scan for events.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-4">Returns after decoding<a href="#returns-after-decoding-4" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#event-object">[EventObject]</a></td><td>An array of events that matched the eventName.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-20">Usage<a href="#usage-20" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const events = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> fcl.getEventsAtBlockIds('A.7e60df042a9c0868.FlowToken.TokensWithdrawn', [</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'c4f239d49e96d1e5fbcf1f31027a6e582e8c03fcd9954177b7723fdb03d938c7',</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> '5dbaa85922eb194a3dc463c946cc01c866f2ff2b88f3e59e21c0d8d00113273f',</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ]),</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getcollection"><code>getCollection</code><a href="#getcollection" class="hash-link" aria-label="Direct link to getcollection" title="Direct link to getcollection"></a></h3> <p>A builder function that returns all a collection containing a list of transaction ids by its collection id.</p> <p>⚠️The block range provided must be from the current spork. All events emitted during past sporks is current unavailable.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-12">Arguments<a href="#arguments-12" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>collectionID</code></td><td>string</td><td>The id of the collection.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-5">Returns after decoding<a href="#returns-after-decoding-5" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#collectionobject">CollectionObject</a></td><td>An object with the id and a list of transactions within the requested collection.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-21">Usage<a href="#usage-21" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const collection = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> fcl.getCollection(</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> 'cccdb0c67d015dc7f6444e8f62a3244ed650215ed66b90603006c70c5ef1f6e5',</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gettransactionstatus"><code>getTransactionStatus</code><a href="#gettransactionstatus" class="hash-link" aria-label="Direct link to gettransactionstatus" title="Direct link to gettransactionstatus"></a></h3> <p>A builder function that returns the status of transaction in the form of a <a href="#transactionstatusobject">TransactionStatusObject</a>.</p> <p>⚠️The transactionID provided must be from the current spork.</p> <p>📣 Considering <a href="#tx">subscribing to the transaction from <code>fcl.tx(id)</code></a> instead of calling this method directly.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-13">Arguments<a href="#arguments-13" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>transactionId</code></td><td>string</td><td>The transactionID returned when submitting a transaction. Example: <code>9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3</code></td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-6">Returns after decoding<a href="#returns-after-decoding-6" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-10">Returns<a href="#returns-10" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#transactionstatusobject">TransactionStatusObject</a></td><td>Object representing the result/status of a transaction</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-22">Usage<a href="#usage-22" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const status = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> fcl.getTransactionStatus(</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> '9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3',</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="gettransaction"><code>getTransaction</code><a href="#gettransaction" class="hash-link" aria-label="Direct link to gettransaction" title="Direct link to gettransaction"></a></h3> <p>A builder function that returns a <a href="#transactionobject">transaction object</a> once decoded.</p> <p>⚠️The transactionID provided must be from the current spork.</p> <p>📣 Considering using <a href="#tx"><code>fcl.tx(id).onceSealed()</code></a> instead of calling this method directly.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-14">Arguments<a href="#arguments-14" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>transactionId</code></td><td>string</td><td>The transactionID returned when submitting a transaction. Example: <code>9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3</code></td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-7">Returns after decoding<a href="#returns-after-decoding-7" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-11">Returns<a href="#returns-11" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#transactionobject">TransactionObject</a></td><td>An full transaction object containing a payload and signatures</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-23">Usage<a href="#usage-23" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const tx = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> fcl.getTransaction(</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> '9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3',</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ),</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="subscribeevents"><code>subscribeEvents</code><a href="#subscribeevents" class="hash-link" aria-label="Direct link to subscribeevents" title="Direct link to subscribeevents"></a></h3> <div class="theme-admonition theme-admonition-info alert alert--info admonition_WoCw"><div class="admonitionHeading_TMsN"><span class="admonitionIcon_Ibzs"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_vXIg"><p>The subscribeEvents SDK builder is for more advanced use cases where you wish to directly specify a starting block to listen for events. For most use cases, consider using the pre-built interaction <a href="#events"><code>fcl.events(eventTypes)</code></a>.</p></div></div> <p>A build that returns a <a href="#eventstream">event stream connection</a> once decoded. It will establish a WebSocket connection to the Access Node and subscribe to events with the given parameters.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-15">Arguments<a href="#arguments-15" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>eventFilter</code></td><td><a href="#eventfilter">EventFilter</a></td><td>The event filter to subscribe to.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-after-decoding-8">Returns after decoding<a href="#returns-after-decoding-8" class="hash-link" aria-label="Direct link to Returns after decoding" title="Direct link to Returns after decoding"></a></h4> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-12">Returns<a href="#returns-12" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#eventstream">EventStreamConnection</a></td><td>A connection to the event stream</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-24">Usage<a href="#usage-24" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>const eventStream = await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> fcl.subscribeEvents({</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> eventTypes: 'A.7e60df042a9c0868.FlowToken.TokensWithdrawn',</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>eventStream.on('heartbeat', (heartbeat) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> console.log(heartbeat);</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>eventStream.on('events', (event) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> console.log(event);</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>eventStream.on('error', (error) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> console.log(error);</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>eventStream.on('end', () => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span> console.log('Connection closed');</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->27</span><div style="display:inline-block;margin-left:16px"><span>eventStream.close();</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getevents-deprecated"><code>getEvents</code> (Deprecated)<a href="#getevents-deprecated" class="hash-link" aria-label="Direct link to getevents-deprecated" title="Direct link to getevents-deprecated"></a></h3> <p>Use <a href="#geteventsatblockheightrange"><code>fcl.getEventsAtBlockHeightRange</code></a> or <a href="#geteventsatblockids"><code>fcl.getEventsAtBlockIds</code></a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getlatestblock-deprecated"><code>getLatestBlock</code> (Deprecated)<a href="#getlatestblock-deprecated" class="hash-link" aria-label="Direct link to getlatestblock-deprecated" title="Direct link to getlatestblock-deprecated"></a></h3> <p>Use <a href="#getblock"><code>fcl.getBlock</code></a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getblockbyid-deprecated"><code>getBlockById</code> (Deprecated)<a href="#getblockbyid-deprecated" class="hash-link" aria-label="Direct link to getblockbyid-deprecated" title="Direct link to getblockbyid-deprecated"></a></h3> <p>Use <a href="#getblock"><code>fcl.getBlock</code></a> and <a href="#atblockid"><code>fcl.atBlockId</code></a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getblockbyheight-deprecated"><code>getBlockByHeight</code> (Deprecated)<a href="#getblockbyheight-deprecated" class="hash-link" aria-label="Direct link to getblockbyheight-deprecated" title="Direct link to getblockbyheight-deprecated"></a></h3> <p>Use <a href="#getblock"><code>fcl.getBlock</code></a> and <a href="#atblockheight"><code>fcl.atBlockHeight</code></a>.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="utility-builders">Utility Builders<a href="#utility-builders" class="hash-link" aria-label="Direct link to Utility Builders" title="Direct link to Utility Builders"></a></h3> <p>These builders are used to compose interactions with other builders such as scripts and transactions.</p> <blockquote> <p>⚠️<strong>Recommendation:</strong> Unless you have a specific use case that require usage of these builders, you should be able to achieve most cases with <code>fcl.query({...options}</code> or <code>fcl.mutate({...options})</code></p> </blockquote> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="arg"><code>arg</code><a href="#arg" class="hash-link" aria-label="Direct link to arg" title="Direct link to arg"></a></h3> <p>A utility builder to be used with <code>fcl.args[...]</code> to create FCL supported arguments for interactions.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-16">Arguments<a href="#arguments-16" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>value</code></td><td>any</td><td>Any value that you are looking to pass to other builders.</td></tr><tr><td><code>type</code></td><td><a href="#ftype">FType</a></td><td>A type supported by Flow.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-13">Returns<a href="#returns-13" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#argumentobject">ArgumentObject</a></td><td>Holds the value and type passed in.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-25">Usage<a href="#usage-25" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.script`</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main(a: Int, b: Int): Int {</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> return a + b</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.args([</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.arg(5, fcl.t.Int), // a</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.arg(4, fcl.t.Int), // b</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> ]),</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode);</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="args"><code>args</code><a href="#args" class="hash-link" aria-label="Direct link to args" title="Direct link to args"></a></h3> <p>A utility builder to be used with other builders to pass in arguments with a value and supported type.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-17">Arguments<a href="#arguments-17" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>args</code></td><td><a href="#argumentobject">[Argument Objects]</a></td><td>An array of arguments that you are looking to pass to other builders.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-14">Returns<a href="#returns-14" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#interaction">Partial Interaction</a></td><td>An interaction that contains the arguments and types passed in. This alone is a partial and incomplete interaction.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-26">Usage<a href="#usage-26" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span>await fcl</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> .send([</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.script`</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main(a: Int, b: Int): Int {</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> return a + b</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> `,</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.args([</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.arg(5, fcl.t.Int), // a</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> fcl.arg(4, fcl.t.Int), // b</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> ]),</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> ])</span></div></div><div><span class="ch-code-line-number">_<!-- -->15</span><div style="display:inline-block;margin-left:16px"><span> .then(fcl.decode); // 9</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="template-builders">Template Builders<a href="#template-builders" class="hash-link" aria-label="Direct link to Template Builders" title="Direct link to Template Builders"></a></h3> <blockquote> <p>⚠️<strong><em>Recommended:</em></strong> The following functionality is simplified by <a href="#query"><code>fcl.query({...options}</code></a> or <a href="#mutate"><code>fcl.mutate({...options})</code></a> and is reccomended to use over the functions below.</p> </blockquote> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="script"><code>script</code><a href="#script" class="hash-link" aria-label="Direct link to script" title="Direct link to script"></a></h3> <p>A template builder to use a Cadence script for an interaction.</p> <p>📣 Use with <code>fcl.args(...)</code> to pass in arguments dynamically.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-18">Arguments<a href="#arguments-18" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>CODE</code></td><td>string</td><td>Should be valid Cadence script.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-15">Returns<a href="#returns-15" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#interaction">Interaction</a></td><td>An interaction containing the code passed in.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-27">Usage<a href="#usage-27" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const code = `</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main(): Int {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> return 5 + 4</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>`;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const answer = await fcl.send([fcl.script(code)]).then(fcl.decode);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>console.log(answer); // 9</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="transaction"><code>transaction</code><a href="#transaction" class="hash-link" aria-label="Direct link to transaction" title="Direct link to transaction"></a></h3> <p>A template builder to use a Cadence transaction for an interaction.</p> <p>⚠️Must be used with <code>fcl.payer</code>, <code>fcl.proposer</code>, <code>fcl.authorizations</code> to produce a valid interaction before sending to the chain.</p> <p>📣 Use with <code>fcl.args[...]</code> to pass in arguments dynamically.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-19">Arguments<a href="#arguments-19" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>CODE</code></td><td>string</td><td>Should be valid a Cadence transaction.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-16">Returns<a href="#returns-16" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#interaction">Partial Interaction</a></td><td>An partial interaction containing the code passed in. Further builders are required to complete the interaction - see warning.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-28">Usage<a href="#usage-28" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const code = `</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> access(all) fun main(): Int {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> return 5 + 4</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>`;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const answer = await fcl.send([fcl.script(code)]).then(fcl.decode);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>console.log(answer); // 9</span></div></div><br></code></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="pre-built-interactions">Pre-built Interactions<a href="#pre-built-interactions" class="hash-link" aria-label="Direct link to Pre-built Interactions" title="Direct link to Pre-built Interactions"></a></h2> <p>These functions are abstracted short hand ways to skip the send and decode steps of sending an interaction to the chain. More pre-built interactions are coming soon.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="account"><code>account</code><a href="#account" class="hash-link" aria-label="Direct link to account" title="Direct link to account"></a></h3> <p>A pre-built interaction that returns the details of an account from their public address.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-20">Arguments<a href="#arguments-20" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>address</code></td><td><a href="#address">Address</a></td><td>Address of the user account with or without a prefix (both formats are supported).</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-17">Returns<a href="#returns-17" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#accountobject">AccountObject</a></td><td>A JSON representation of a user account.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-29">Usage<a href="#usage-29" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const account = await fcl.account('0x1d007d755706c469');</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="block"><code>block</code><a href="#block" class="hash-link" aria-label="Direct link to block" title="Direct link to block"></a></h3> <p>A pre-built interaction that returns the latest block (optionally sealed or not), by id, or by height.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-21">Arguments<a href="#arguments-21" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>sealed</code></td><td>boolean</td><td>false</td><td>If the latest block should be sealed or not. See <a href="#interaction">block states</a>.</td></tr><tr><td><code>id</code></td><td>string</td><td></td><td>ID of block to get.</td></tr><tr><td><code>height</code></td><td>int</td><td></td><td>Height of block to get.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-18">Returns<a href="#returns-18" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#blockobject">BlockObject</a></td><td>A JSON representation of a block.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-30">Usage<a href="#usage-30" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>await fcl.block(); // get latest finalized block</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>await fcl.block({ sealed: true }); // get latest sealed block</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>await fcl.block({</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> id: '0b1bdfa9ddaaf31d53c584f208313557d622d1fedee1586ffc38fb5400979faa',</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}); // get block by id</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>await fcl.block({ height: 56481953 }); // get block by height</span></div></div><br></code></div></div> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="latestblock-deprecated"><code>latestBlock</code> (Deprecated)<a href="#latestblock-deprecated" class="hash-link" aria-label="Direct link to latestblock-deprecated" title="Direct link to latestblock-deprecated"></a></h3> <p>A pre-built interaction that returns the latest block (optionally sealed or not).</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-22">Arguments<a href="#arguments-22" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>isSealed</code></td><td>boolean</td><td>false</td><td>If the latest block should be sealed or not. See <a href="#interaction">block states</a>.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-19">Returns<a href="#returns-19" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><a href="#blockobject">BlockObject</a></td><td>A JSON representation of a block.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-31">Usage<a href="#usage-31" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const latestBlock = await fcl.latestBlock();</span></div></div><br></code></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="transaction-status-utility">Transaction Status Utility<a href="#transaction-status-utility" class="hash-link" aria-label="Direct link to Transaction Status Utility" title="Direct link to Transaction Status Utility"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="tx"><code>tx</code><a href="#tx" class="hash-link" aria-label="Direct link to tx" title="Direct link to tx"></a></h3> <p>A utility function that lets you set the transaction to get subsequent status updates (via polling) and the finalized result once available. ⚠️The poll rate is set at <code>2500ms</code> and will update at that interval until transaction is sealed.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-23">Arguments<a href="#arguments-23" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>transactionId</code></td><td>string</td><td>A valid transaction id.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-20">Returns<a href="#returns-20" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>snapshot()</code></td><td>function</td><td>Returns the current state of the transaction.</td></tr><tr><td><code>subscribe(cb)</code></td><td>function</td><td>Calls the <code>cb</code> passed in with the new transaction on a status change.</td></tr><tr><td><code>onceFinalized()</code></td><td>function</td><td>Provides the transaction once status <code>2</code> is returned. See <a href="#transaction-statuses">Tranasaction Statuses</a>.</td></tr><tr><td><code>onceExecuted()</code></td><td>function</td><td>Provides the transaction once status <code>3</code> is returned. See <a href="#transaction-statuses">Tranasaction Statuses</a>.</td></tr><tr><td><code>onceSealed()</code></td><td>function</td><td>Provides the transaction once status <code>4</code> is returned. See <a href="#transaction-statuses">Tranasaction Statuses</a>.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-32">Usage<a href="#usage-32" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const [txStatus, setTxStatus] = useState(null);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>useEffect(() => fcl.tx(txId).subscribe(setTxStatus));</span></div></div><br></code></div></div> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="event-polling-utility">Event Polling Utility<a href="#event-polling-utility" class="hash-link" aria-label="Direct link to Event Polling Utility" title="Direct link to Event Polling Utility"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="events"><code>events</code><a href="#events" class="hash-link" aria-label="Direct link to events" title="Direct link to events"></a></h3> <p>A utility function that lets you set the transaction to get subsequent status updates (via polling) and the finalized result once available. ⚠️The poll rate is set at <code>10000ms</code> and will update at that interval for getting new events.</p> <p>Note: ⚠️<code>fcl.eventPollRate</code> value <strong>could</strong> be set to change the polling rate of all events subcribers, check <a href="#configuration">FCL Configuration</a> for guide.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="arguments-24">Arguments<a href="#arguments-24" class="hash-link" aria-label="Direct link to Arguments" title="Direct link to Arguments"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>eventNameOrFilter</code></td><td>string | <a href="#eventfilter">EventFilter</a></td><td>The name of the event or an event filter object.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="returns-21">Returns<a href="#returns-21" class="hash-link" aria-label="Direct link to Returns" title="Direct link to Returns"></a></h4> <table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>subscribe(cb)</code></td><td>function</td><td>Calls the <code>cb</code> passed in with the new event.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-33">Usage<a href="#usage-33" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>// in some react component</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>fcl.events(eventName).subscribe((event) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> console.log(event);</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="examples-4">Examples<a href="#examples-4" class="hash-link" aria-label="Direct link to Examples" title="Direct link to Examples"></a></h4> <ul> <li><a href="https://github.com/orodio/flow-view-source/blob/master/src/pages/event.comp.js" target="_blank" rel="noopener noreferrer">Flow-view-source example</a></li> </ul> <hr> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="types-interfaces-and-definitions">Types, Interfaces, and Definitions<a href="#types-interfaces-and-definitions" class="hash-link" aria-label="Direct link to Types, Interfaces, and Definitions" title="Direct link to Types, Interfaces, and Definitions"></a></h2> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="builders-1"><code>Builders</code><a href="#builders-1" class="hash-link" aria-label="Direct link to builders-1" title="Direct link to builders-1"></a></h3> <p>Builders are modular functions that can be coupled together with <code>fcl.send([...builders])</code> to create an <a href="#interaction">Interaction</a>. The builders needed to create an interaction depend on the script or transaction that is being sent.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="interaction"><code>Interaction</code><a href="#interaction" class="hash-link" aria-label="Direct link to interaction" title="Direct link to interaction"></a></h3> <p>An interaction is an object containing the information to perform an action on chain.This object is populated through builders and converted into the approriate access node API call. See the interaction object <a href="https://github.com/onflow/fcl-js/blob/master/packages/sdk/src/interaction/interaction.ts" target="_blank" rel="noopener noreferrer">here</a>. A 'partial' interaction is an interaction object that does not have sufficient information to the intended on-chain action. Multiple partial interactions (through builders) can be coupled to create a complete interaction.</p> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="currentuserobject"><code>CurrentUserObject</code><a href="#currentuserobject" class="hash-link" aria-label="Direct link to currentuserobject" title="Direct link to currentuserobject"></a></h3> <table><thead><tr><th>Key</th><th>Value Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>addr</code></td><td><a href="#address">Address</a></td><td><code>null</code></td><td>The public address of the current user</td></tr><tr><td><code>cid</code></td><td>string</td><td><code>null</code></td><td>Allows wallets to specify a <a href="https://docs.ipfs.io/concepts/content-addressing/" target="_blank" rel="noopener noreferrer">content identifier</a> for user metadata.</td></tr><tr><td><code>expiresAt</code></td><td>number</td><td><code>null</code></td><td>Allows wallets to specify a time-frame for a valid session.</td></tr><tr><td><code>f_type</code></td><td>string</td><td><code>'USER'</code></td><td>A type identifier used internally by FCL.</td></tr><tr><td><code>f_vsn</code></td><td>string</td><td><code>'1.0.0'</code></td><td>FCL protocol version.</td></tr><tr><td><code>loggedIn</code></td><td>boolean</td><td><code>null</code></td><td>If the user is logged in.</td></tr><tr><td><code>services</code></td><td><code>[ServiceObject]</code></td><td><code>[]</code></td><td>A list of trusted services that express ways of interacting with the current user's identity, including means to further discovery, <a href="https://gist.github.com/orodio/a74293f65e83145ec8b968294808cf35#you-know-who-the-user-is" target="_blank" rel="noopener noreferrer">authentication, authorization</a>, or other kinds of interactions.</td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="authorizationobject"><code>AuthorizationObject</code><a href="#authorizationobject" class="hash-link" aria-label="Direct link to authorizationobject" title="Direct link to authorizationobject"></a></h3> <p>This type conforms to the interface required for FCL to authorize transaction on behalf o the current user.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>addr</code></td><td><a href="#address">Address</a></td><td>The address of the authorizer</td></tr><tr><td><code>signingFunction</code></td><td>function</td><td>A function that allows FCL to sign using the authorization details and produce a valid signature.</td></tr><tr><td><code>keyId</code></td><td>number</td><td>The index of the key to use during authorization. (Multiple keys on an account is possible).</td></tr><tr><td><code>sequenceNum</code></td><td>number</td><td>A number that is incremented per transaction using they keyId.</td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="signableobject"><code>SignableObject</code><a href="#signableobject" class="hash-link" aria-label="Direct link to signableobject" title="Direct link to signableobject"></a></h3> <p>An object that contains all the information needed for FCL to sign a message with the user's signature.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>addr</code></td><td><a href="#address">Address</a></td><td>The address of the authorizer</td></tr><tr><td><code>keyId</code></td><td>number</td><td>The index of the key to use during authorization. (Multiple keys on an account is possible).</td></tr><tr><td><code>signature</code></td><td>function</td><td>A <a href="#signing-function">SigningFunction</a> that can produce a valid signature for a user from a message.</td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="accountobject"><code>AccountObject</code><a href="#accountobject" class="hash-link" aria-label="Direct link to accountobject" title="Direct link to accountobject"></a></h3> <p>The JSON representation of an account on the Flow blockchain.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>address</code></td><td><a href="#address">Address</a></td><td>The address of the account</td></tr><tr><td><code>balance</code></td><td>number</td><td>The FLOW balance of the account in 10^8.</td></tr><tr><td><code>code</code></td><td><a href="#code">Code</a></td><td>The code of any Cadence contracts stored in the account.</td></tr><tr><td><code>contracts</code></td><td>Object: <a href="#contract">Contract</a></td><td>An object with keys as the contract name deployed and the value as the the cadence string.</td></tr><tr><td><code>keys</code></td><td><a href="#keyobject">[KeyObject]</a></td><td>Any contracts deployed to this account.</td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="address"><code>Address</code><a href="#address" class="hash-link" aria-label="Direct link to address" title="Direct link to address"></a></h3> <table><thead><tr><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td>string(formatted)</td><td>A valid Flow address should be 16 characters in length. <br>A <code>0x</code> prefix is optional during inputs. <br>eg. <code>f8d6e0586b0a20c1</code></td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="argumentobject"><code>ArgumentObject</code><a href="#argumentobject" class="hash-link" aria-label="Direct link to argumentobject" title="Direct link to argumentobject"></a></h3> <p>An argument object created by <code>fcl.arg(value,type)</code></p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>value</code></td><td>any</td><td>Any value to be used as an argument to a builder.</td></tr><tr><td><code>xform</code></td><td><a href="#ftype">FType</a></td><td>Any of the supported types on Flow.</td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="argumentfunction"><code>ArgumentFunction</code><a href="#argumentfunction" class="hash-link" aria-label="Direct link to argumentfunction" title="Direct link to argumentfunction"></a></h3> <p>An function that takes the <code>fcl.arg</code> function and fcl types <code>t</code> and returns an array of <code>fcl.arg(value,type)</code>.</p> <p><code>(arg, t) => Array<Arg></code></p> <table><thead><tr><th>Parameter Name</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>arg</code></td><td>function</td><td>A function that returns an <a href="#argumentobject">ArgumentObject</a> - <code>fcl.arg</code>.</td></tr><tr><td><code>t</code></td><td><a href="#ftype">FTypes</a></td><td>An object with acccess to all of the supported types on Flow.</td></tr></tbody></table> <p><strong>Returns</strong></p> <table><thead><tr><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>[fcl.args]</code></td><td>Array of <code>fcl.args</code>.</td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="authorization-function"><code>Authorization Function</code><a href="#authorization-function" class="hash-link" aria-label="Direct link to authorization-function" title="Direct link to authorization-function"></a></h3> <p>An authorization function must produce the information of the user that is going to sign and a signing function to use the information to produce a signature.</p> <p>⚠️This function is always async.</p> <p>📣 By default FCL exposes <code>fcl.authz</code> that produces the authorization object for the current user (given they are signed in and only on the browser). Replace this with your own function that conforms to this interface to use it wherever an authorization object is needed.</p> <table><thead><tr><th>Parameter Name</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>account</code></td><td><a href="#accountobject">AccountObject</a></td><td>The account of the user that is going to sign.</td></tr></tbody></table> <p><strong>Returns</strong></p> <table><thead><tr><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>Promise<[AuthorizationObject](#authorizationobject)></code></td><td>The object that contains all the information needed by FCL to authorize a user's transaction.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-34">Usage<a href="#usage-34" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <hr> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span>const authorizationFunction = async (account) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> // authorization function need to return an account</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> const { address, keys } = account</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> const tempId = `${address}-${keys[process.env.minterAccountIndex]}`;</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> const keyId = Number(KEY_ID);</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> let signingFunction = async signable => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> return {</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> keyId,</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> addr: fcl.withPrefix(address),</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> signature: sign(process.env.FLOW_MINTER_PRIVATE_KEY, signable.message), // signing function, read below</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> return {</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> ...account,</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> address,</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> keyId,</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> tempId,</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> signingFunction,</span></div></div><div><span class="ch-code-line-number">_<!-- -->19</span><div style="display:inline-block;margin-left:16px"><span> }</span></div></div><br></code></div></div> <ul> <li><a href="https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/authorization-function.md" target="_blank" rel="noopener noreferrer">Detailed explanation</a></li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="signing-function"><code>Signing Function</code><a href="#signing-function" class="hash-link" aria-label="Direct link to signing-function" title="Direct link to signing-function"></a></h3> <p>Consumes a payload and produces a signature for a transaction.</p> <p>⚠️This function is always async.</p> <p>📣 Only write your own signing function if you are writing your own custom authorization function.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="payload">Payload<a href="#payload" class="hash-link" aria-label="Direct link to Payload" title="Direct link to Payload"></a></h4> <p>Note: These values are destructed from the payload object in the first argument.</p> <table><thead><tr><th>Parameter Name</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>message</code></td><td>string</td><td>The encoded string which needs to be used to produce the signature.</td></tr><tr><td><code>addr</code></td><td>string</td><td>The encoded string which needs to be used to produce the signature.</td></tr><tr><td><code>keyId</code></td><td>string</td><td>The encoded string which needs to be used to produce the signature.</td></tr><tr><td><code>roles</code></td><td>string</td><td>The encoded string which needs to be used to produce the signature.</td></tr><tr><td><code>voucher</code></td><td>object</td><td>The raw transactions information, can be used to create the message for additional safety and lack of trust in the supplied message.</td></tr></tbody></table> <p><strong>Returns</strong></p> <table><thead><tr><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>Promise<[SignableObject](#signableobject)></code></td><td>The object that contains all the information needed by FCL to authorize a user's transaction.</td></tr></tbody></table> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-35">Usage<a href="#usage-35" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>import * as fcl from '@onflow/fcl';</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>import { ec as EC } from 'elliptic';</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>import { SHA3 } from 'sha3';</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>const ec: EC = new EC('p256');</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>const produceSignature = (privateKey, msg) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> const key = ec.keyFromPrivate(Buffer.from(privateKey, 'hex'));</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> const sig = key.sign(this.hashMsg(msg));</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> const n = 32;</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> const r = sig.r.toArrayLike(Buffer, 'be', n);</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> const s = sig.s.toArrayLike(Buffer, 'be', n);</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> return Buffer.concat([r, s]).toString('hex');</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>const signingFunction = ({</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> message, // The encoded string which needs to be used to produce the signature.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> addr, // The address of the Flow Account this signature is to be produced for.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> keyId, // The keyId of the key which is to be used to produce the signature.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> roles: {</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> proposer, // A Boolean representing if this signature to be produced for a proposer.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> authorizer, // A Boolean representing if this signature to be produced for a authorizer.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> payer, // A Boolean representing if this signature to be produced for a payer.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> voucher, // The raw transactions information, can be used to create the message for additional safety and lack of trust in the supplied message.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>}) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> return {</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> addr, // The address of the Flow Account this signature was produced for.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> keyId, // The keyId for which key was used to produce the signature.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> signature: produceSignature(message), // The hex encoded string representing the signature of the message.</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span> };</span></div></div><div><span class="ch-code-line-number">_<!-- -->31</span><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="examples-5">Examples:<a href="#examples-5" class="hash-link" aria-label="Direct link to Examples:" title="Direct link to Examples:"></a></h4> <ul> <li><a href="https://github.com/onflow/fcl-js/blob/master/packages/fcl-core/src/wallet-provider-spec/authorization-function.md" target="_blank" rel="noopener noreferrer">Detailed explanation</a></li> </ul> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="transactionobject"><code>TransactionObject</code><a href="#transactionobject" class="hash-link" aria-label="Direct link to transactionobject" title="Direct link to transactionobject"></a></h3> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>args</code></td><td>object</td><td>A list of encoded Cadence values passed into this transaction. These have not been decoded by the JS-SDK.</td></tr><tr><td><code>authorizers</code></td><td><a href="#address">[Address]</a></td><td>A list of the accounts that are authorizing this transaction to mutate to their on-chain account state. <a href="/build/basics/transactions#signer-roles">See more here</a>.</td></tr><tr><td><code>envelopeSignatures</code></td><td><a href="#signableobject">[SignableObject]</a></td><td>A list of signatures generated by the payer role. <a href="/build/basics/transactions#signing-a-transaction">See more here</a>.</td></tr><tr><td><code>gasLimit</code></td><td>number</td><td>The maximum number of computational units that can be used to execute this transaction. <a href="/build/basics/fees">See more here</a>.</td></tr><tr><td><code>payer</code></td><td><a href="#address">Address</a></td><td>The account that pays the fee for this transaction. <a href="/build/basics/transactions#signer-roles">See more here</a>.</td></tr><tr><td><code>payloadSignatures</code></td><td><a href="#signableobject">[SignableObject]</a></td><td>A list of signatures generated by the proposer and authorizer roles. <a href="/build/basics/transactions#signing-a-transaction">See more here</a>.</td></tr><tr><td><code>proposalKey</code></td><td><a href="#proposalkeyobject">[ProposalKey]</a></td><td>The account key used to propose this transaction</td></tr><tr><td><code>referenceBlockId</code></td><td>string</td><td>A reference to the block used to calculate the expiry of this transaction.</td></tr><tr><td><code>script</code></td><td>string</td><td>The UTF-8 encoded Cadence source code that defines the execution logic for this transaction</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="transactionrolesobject"><code>TransactionRolesObject</code><a href="#transactionrolesobject" class="hash-link" aria-label="Direct link to transactionrolesobject" title="Direct link to transactionrolesobject"></a></h3> <table><thead><tr><th>Key Name</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td>proposer</td><td>boolean</td><td>A Boolean representing if this signature to be produced for a proposer.</td></tr><tr><td>authorizer</td><td>boolean</td><td>A Boolean representing if this signature to be produced for an authorizer.</td></tr><tr><td>payer</td><td>boolean</td><td>A Boolean representing if this signature to be produced for a payer.</td></tr></tbody></table> <p>For more on what each transaction role means, see <a href="/build/basics/transactions#signer-roles">singing roles</a>.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="transactionstatusobject"><code>TransactionStatusObject</code><a href="#transactionstatusobject" class="hash-link" aria-label="Direct link to transactionstatusobject" title="Direct link to transactionstatusobject"></a></h3> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>blockId</code></td><td>string</td><td>ID of the block that contains the transaction.</td></tr><tr><td><code>events</code></td><td><a href="#event-object">[EventObject]</a></td><td>An array of events that were emitted during the transaction.</td></tr><tr><td><code>status</code></td><td><a href="#transaction-statuses">TransactionStatus</a></td><td>The status of the transaction on the blockchain.</td></tr><tr><td><code>statusString</code></td><td><a href="#transaction-statuses">TransactionStatus</a></td><td>The <code>status</code> as as descriptive text (e.g. "FINALIZED").</td></tr><tr><td><code>errorMessage</code></td><td>string</td><td>An error message if it exists. Default is an empty string <code>''</code>.</td></tr><tr><td><code>statusCode</code></td><td>number</td><td>The pass/fail status. 0 indicates the transaction succeeded, 1 indicates it failed.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="eventname"><code>EventName</code><a href="#eventname" class="hash-link" aria-label="Direct link to eventname" title="Direct link to eventname"></a></h3> <table><thead><tr><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td>string(formatted)</td><td>A event name in Flow must follow the format <code>A.{AccountAddress}.{ContractName}.{EventName}</code> <br>eg. <code>A.ba1132bc08f82fe2.Debug.Log</code></td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="contract"><code>Contract</code><a href="#contract" class="hash-link" aria-label="Direct link to contract" title="Direct link to contract"></a></h3> <table><thead><tr><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td>string(formatted)</td><td>A formatted string that is a valid cadence contract.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="keyobject"><code>KeyObject</code><a href="#keyobject" class="hash-link" aria-label="Direct link to keyobject" title="Direct link to keyobject"></a></h3> <p>This is the JSON representation of a key on the Flow blockchain.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>index</code></td><td>number</td><td>The address of the account</td></tr><tr><td><code>publicKey</code></td><td>string</td><td>The public portion of a public/private key pair</td></tr><tr><td><code>signAlgo</code></td><td>number</td><td>An index referring to one of <code>ECDSA_P256</code> or <code>ECDSA_secp256k1</code></td></tr><tr><td><code>hashAlgo</code></td><td>number</td><td>An index referring to one of <code>SHA2_256</code> or <code>SHA3_256</code></td></tr><tr><td><code>weight</code></td><td>number</td><td>A number between 1 and 1000 indicating the relative weight to other keys on the account.</td></tr><tr><td><code>sequenceNumber</code></td><td>number</td><td>This number is incremented for every transaction signed using this key.</td></tr><tr><td><code>revoked</code></td><td>boolean</td><td>If this key has been disabled for use.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="proposalkeyobject"><code>ProposalKeyObject</code><a href="#proposalkeyobject" class="hash-link" aria-label="Direct link to proposalkeyobject" title="Direct link to proposalkeyobject"></a></h3> <p>ProposalKey is the account key used to propose this transaction.</p> <p>A proposal key references a specific key on an account, along with an up-to-date sequence number for that key. This sequence number is used to prevent replay attacks.</p> <p>You can find more information about sequence numbers <a href="/build/basics/transactions#sequence-numbers">here</a></p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>address</code></td><td><a href="#address">Address</a></td><td>The address of the account</td></tr><tr><td><code>keyIndex</code></td><td>number</td><td>The index of the account key being referenced</td></tr><tr><td><code>sequenceNumber</code></td><td>number</td><td>The sequence number associated with this account key for this transaction</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="blockobject"><code>BlockObject</code><a href="#blockobject" class="hash-link" aria-label="Direct link to blockobject" title="Direct link to blockobject"></a></h3> <p>The JSON representation of a key on the Flow blockchain.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td>The id of the block.</td></tr><tr><td><code>parentId</code></td><td>string</td><td>The id of the parent block.</td></tr><tr><td><code>height</code></td><td>number</td><td>The height of the block.</td></tr><tr><td><code>timestamp</code></td><td>object</td><td>Contains time related fields.</td></tr><tr><td><code>collectionGuarantees</code></td><td>[<a href="#collectionguaranteeobject">CollectionGuaranteeObject</a>]</td><td>Contains the ids of collections included in the block.</td></tr><tr><td><code>blockSeals</code></td><td>[SealedBlockObject]</td><td>The details of which nodes executed and sealed the blocks.</td></tr><tr><td><code>signatures</code></td><td>Uint8Array([numbers])</td><td>All signatures.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="blockheaderobject"><code>BlockHeaderObject</code><a href="#blockheaderobject" class="hash-link" aria-label="Direct link to blockheaderobject" title="Direct link to blockheaderobject"></a></h3> <p>The subset of the <a href="#blockobject">BlockObject</a> containing only the header values of a block.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td>The id of the block.</td></tr><tr><td><code>parentId</code></td><td>string</td><td>The id of the parent block.</td></tr><tr><td><code>height</code></td><td>number</td><td>The height of the block.</td></tr><tr><td><code>timestamp</code></td><td>object</td><td>Contains time related fields.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="collectionguaranteeobject"><code>CollectionGuaranteeObject</code><a href="#collectionguaranteeobject" class="hash-link" aria-label="Direct link to collectionguaranteeobject" title="Direct link to collectionguaranteeobject"></a></h3> <p>A collection that has been included in a block.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>collectionId</code></td><td>string</td><td>The id of the block.</td></tr><tr><td><code>signatures</code></td><td><a href="#SignatureObject">SignatureObject</a></td><td>All signatures.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="collectionobject"><code>CollectionObject</code><a href="#collectionobject" class="hash-link" aria-label="Direct link to collectionobject" title="Direct link to collectionobject"></a></h3> <p>A collection is a list of transactions that are contained in the same block.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td>The id of the collection.</td></tr><tr><td><code>transactionIds</code></td><td>[string]</td><td>The ids of the transactions included in the collection.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="responseobject"><code>ResponseObject</code><a href="#responseobject" class="hash-link" aria-label="Direct link to responseobject" title="Direct link to responseobject"></a></h3> <p>The format of all responses in FCL returned from <code>fcl.send(...)</code>. For full details on the values and descriptions of the keys, view <a href="https://github.com/onflow/fcl-js/tree/master/packages/sdk/src/response" target="_blank" rel="noopener noreferrer">here</a>.</p> <table><thead><tr><th>Key</th></tr></thead><tbody><tr><td><code>tag</code></td></tr><tr><td><code>transaction</code></td></tr><tr><td><code>transactionStatus</code></td></tr><tr><td><code>transactionId</code></td></tr><tr><td><code>encodedData</code></td></tr><tr><td><code>events</code></td></tr><tr><td><code>account</code></td></tr><tr><td><code>block</code></td></tr><tr><td><code>blockHeader</code></td></tr><tr><td><code>latestBlock</code></td></tr><tr><td><code>collection</code></td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="event-object"><code>Event Object</code><a href="#event-object" class="hash-link" aria-label="Direct link to event-object" title="Direct link to event-object"></a></h3> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>blockId</code></td><td>string</td><td>ID of the block that contains the event.</td></tr><tr><td><code>blockHeight</code></td><td>number</td><td>Height of the block that contains the event.</td></tr><tr><td><code>blockTimestamp</code></td><td>string</td><td>The timestamp of when the block was sealed in a <code>DateString</code> format. eg. <code>'2021-06-25T13:42:04.227Z'</code></td></tr><tr><td><code>type</code></td><td><a href="#eventname">EventName</a></td><td>A string containing the event name.</td></tr><tr><td><code>transactionId</code></td><td>string</td><td>Can be used to query transaction information, eg. via a Flow block explorer.</td></tr><tr><td><code>transactionIndex</code></td><td>number</td><td>Used to prevent replay attacks.</td></tr><tr><td><code>eventIndex</code></td><td>number</td><td>Used to prevent replay attacks.</td></tr><tr><td><code>data</code></td><td>any</td><td>The data emitted from the event.</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="transaction-statuses"><code>Transaction Statuses</code><a href="#transaction-statuses" class="hash-link" aria-label="Direct link to transaction-statuses" title="Direct link to transaction-statuses"></a></h3> <p>The status of a transaction will depend on the Flow blockchain network and which phase it is in as it completes and is finalized.</p> <table><thead><tr><th>Status Code</th><th>Description</th></tr></thead><tbody><tr><td><code>0</code></td><td>Unknown</td></tr><tr><td><code>1</code></td><td>Transaction Pending - Awaiting Finalization</td></tr><tr><td><code>2</code></td><td>Transaction Finalized - Awaiting Execution</td></tr><tr><td><code>3</code></td><td>Transaction Executed - Awaiting Sealing</td></tr><tr><td><code>4</code></td><td>Transaction Sealed - Transaction Complete. At this point the transaction result has been committed to the blockchain.</td></tr><tr><td><code>5</code></td><td>Transaction Expired</td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="grpc-statuses"><code>GRPC Statuses</code><a href="#grpc-statuses" class="hash-link" aria-label="Direct link to grpc-statuses" title="Direct link to grpc-statuses"></a></h3> <p>The access node GRPC implementation follows the standard GRPC Core status code spec. View <a href="https://grpc.github.io/grpc/core/md_doc_statuscodes.html" target="_blank" rel="noopener noreferrer">here</a>.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="ftype"><code>FType</code><a href="#ftype" class="hash-link" aria-label="Direct link to ftype" title="Direct link to ftype"></a></h3> <p>FCL arguments must specify one of the following support types for each value passed in.</p> <table><thead><tr><th>Type</th><th>Example</th></tr></thead><tbody><tr><td><code>UInt</code></td><td><code>fcl.arg(1, t.UInt)</code></td></tr><tr><td><code>UInt8</code></td><td><code>fcl.arg(8, t.UInt8)</code></td></tr><tr><td><code>UInt16</code></td><td><code>fcl.arg(16, t.UInt16)</code></td></tr><tr><td><code>UInt32</code></td><td><code>fcl.arg(32, t.UInt32)</code></td></tr><tr><td><code>UInt64</code></td><td><code>fcl.arg(64, t.UInt64)</code></td></tr><tr><td><code>UInt128</code></td><td><code>fcl.arg(128, t.UInt128)</code></td></tr><tr><td><code>UInt256</code></td><td><code>fcl.arg(256, t.UInt256)</code></td></tr><tr><td><code>Int</code></td><td><code>fcl.arg(1, t.Int)</code></td></tr><tr><td><code>Int8</code></td><td><code>fcl.arg(8, t.Int8)</code></td></tr><tr><td><code>Int16</code></td><td><code>fcl.arg(16, t.Int16)</code></td></tr><tr><td><code>Int32</code></td><td><code>fcl.arg(32, t.Int32)</code></td></tr><tr><td><code>Int64</code></td><td><code>fcl.arg(64, t.Int64)</code></td></tr><tr><td><code>Int128</code></td><td><code>fcl.arg(128, t.Int128)</code></td></tr><tr><td><code>Int256</code></td><td><code>fcl.arg(256, t.Int256)</code></td></tr><tr><td><code>Word8</code></td><td><code>fcl.arg(8, t.Word8)</code></td></tr><tr><td><code>Word16</code></td><td><code>fcl.arg(16, t.Word16)</code></td></tr><tr><td><code>Word32</code></td><td><code>fcl.arg(32, t.Word32)</code></td></tr><tr><td><code>Word64</code></td><td><code>fcl.arg(64, t.Word64)</code></td></tr><tr><td><code>UFix64</code></td><td><code>fcl.arg("64.123", t.UFix64)</code></td></tr><tr><td><code>Fix64</code></td><td><code>fcl.arg("64.123", t.Fix64)</code></td></tr><tr><td><code>String</code></td><td><code>fcl.arg("Flow", t.String)</code></td></tr><tr><td><code>Character</code></td><td><code>fcl.arg("c", t.String)</code></td></tr><tr><td><code>Bool</code></td><td><code>fcl.arg(true, t.String)</code></td></tr><tr><td><code>Address</code></td><td><code>fcl.arg("0xABC123DEF456", t.Address)</code></td></tr><tr><td><code>Optional</code></td><td><code>fcl.arg("Flow", t.Optional(t.String))</code></td></tr><tr><td><code>Array</code></td><td><code>fcl.args([ fcl.arg(["First", "Second"], t.Array(t.String)) ])</code></td></tr><tr><td><code>Dictionary</code></td><td><code>fcl.args([fcl.arg([{key: 1, value: "one"}, {key: 2, value: "two"}], t.Dictionary({key: t.Int, value: t.String}))])</code></td></tr><tr><td><code>Path</code></td><td><code>fcl.arg({ domain: "public", identifier: "flowTokenVault" }, t.Path)</code></td></tr></tbody></table> <hr> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="eventfilter"><code>EventFilter</code><a href="#eventfilter" class="hash-link" aria-label="Direct link to eventfilter" title="Direct link to eventfilter"></a></h3> <p>An object that contains the parameters to filter events, used for event streaming in the <a href="#events"><code>fcl.events</code></a> function.</p> <table><thead><tr><th>Name</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>startBlockId</code></td><td>string | undefined</td><td>The block ID to start listening for events. Example: <code>9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3</code></td></tr><tr><td><code>startHeight</code></td><td>number | undefined</td><td>The block height to start listening for events. Example: <code>123</code></td></tr><tr><td><code>eventTypes</code></td><td>string[] | undefined</td><td>The event types to listen for. Example: <code>A.7e60df042a9c0868.FlowToken.TokensWithdrawn</code></td></tr><tr><td><code>addresses</code></td><td>string[] | undefined</td><td>The addresses to listen for. Example: <code>0x7e60df042a9c0868</code></td></tr><tr><td><code>contracts</code></td><td>string[] | undefined</td><td>The contracts to listen for. Example: <code>0x7e60df042a9c0868</code></td></tr><tr><td><code>opts.heartbeatInterval</code></td><td>number | undefined</td><td>The interval in milliseconds to send a heartbeat to the Access Node. Example: <code>10000</code></td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="streamconnection"><code>StreamConnection</code><a href="#streamconnection" class="hash-link" aria-label="Direct link to streamconnection" title="Direct link to streamconnection"></a></h3> <p>A stream connection is an object for subscribing to generic data from any WebSocket data stream. This is the base type for all stream connections. Two channels, <code>close</code> and <code>error</code>, are always available, as they are used to signal the end of the stream and any errors that occur.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span>interface StreamConnection<ChannelMap extends { [name: string]: any }> {</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> // Subscribe to a channel</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> on<C extends keyof ChannelMap>(</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> channel: C,</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> listener: (data: ChannelMap[C]) => void,</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> ): this;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> on(event: 'close', listener: () => void): this;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> on(event: 'error', listener: (err: any) => void): this;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> // Unsubscribe from a channel</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> off<C extends keyof ChannelMap>(</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> event: C,</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> listener: (data: ChannelMap[C]) => void,</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> ): this;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> off(event: 'close', listener: () => void): this;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> off(event: 'error', listener: (err: any) => void): this;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> // Close the connection</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span> close(): void;</span></div></div><div><span class="ch-code-line-number">_<!-- -->20</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-36">Usage<a href="#usage-36" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>import { StreamConnection } from "@onflow/typedefs"</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>const stream: StreamConnection = ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>stream.on("close", () => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> // Handle close</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>})</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>stream.on("error", (err) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span> // Handle error</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>})</span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->13</span><div style="display:inline-block;margin-left:16px"><span>stream.close()</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="eventstream"><code>EventStream</code><a href="#eventstream" class="hash-link" aria-label="Direct link to eventstream" title="Direct link to eventstream"></a></h3> <p>An event stream is a stream connection that emits events and block heartbeats. Based on the connection parameters, heartbeats will be emitted at least as often as some fixed block height interval. It is a specific variant of a <a href="#streamconnection">StreamConnection</a>.</p> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>type EventStream = StreamConnection<{</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> events: Event[];</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> heartbeat: BlockHeartbeat;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}>;</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-37">Usage<a href="#usage-37" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>import { EventStream } from "@onflow/typedefs"</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>const stream: EventStream = ...</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>stream.on("events", (events) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> // Handle events</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>})</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>stream.on("heartbeat", (heartbeat) => {</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span> // Handle heartbeat</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>})</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>// Close the stream</span></div></div><div><span class="ch-code-line-number">_<!-- -->14</span><div style="display:inline-block;margin-left:16px"><span>stream.close()</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="blockheartbeat"><code>BlockHeartbeat</code><a href="#blockheartbeat" class="hash-link" aria-label="Direct link to blockheartbeat" title="Direct link to blockheartbeat"></a></h3> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>export interface BlockHeartbeat {</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> blockId: string;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> blockHeight: number;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span> timestamp: string;</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br></code></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="usage-38">Usage<a href="#usage-38" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></a></h4> <div class="ch-codeblock not-prose" data-ch-theme="nord"><div class="ch-code-wrapper ch-code" data-ch-measured="false"><code class="ch-code-scroll-parent"><br><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>import { BlockHeartbeat } from "@onflow/typedefs"</span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><span class="ch-code-line-number">_<!-- -->10</span><div style="display:inline-block;margin-left:16px"><span>const heartbeat: BlockHeartbeat = ...</span></div></div><br></code></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="signatureobject">SignatureObject<a href="#signatureobject" class="hash-link" aria-label="Direct link to SignatureObject" title="Direct link to SignatureObject"></a></h3> <p>Signature objects are used to represent a signature for a particular message as well as the account and keyId which signed for this message.</p> <table><thead><tr><th>Key</th><th>Value Type</th><th>Description</th></tr></thead><tbody><tr><td><code>addr</code></td><td><a href="#address">Address</a></td><td>the address of the account which this signature has been generated for</td></tr><tr><td><code>keyId</code></td><td>number</td><td>The index of the key to use during authorization. (Multiple keys on an account is possible).</td></tr><tr><td><code>signature</code></td><td>string</td><td>a hexidecimal-encoded string representation of the generated signature</td></tr></tbody></table></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/onflow/docs/tree/main/docs/tools/clients/fcl-js/api.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2025-03-18T19:30:50.000Z" itemprop="dateModified">Mar 18, 2025</time></b> by <b>Jordan Ribbink</b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/tools/clients/fcl-js"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Flow Client Library (FCL)</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/tools/clients/fcl-js/sdk-guidelines"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">SDK Reference</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_jeP5 thin-scrollbar theme-doc-toc-desktop"><div class="p-1"><h6 class="mb-0 p-1">Rate this page</h6><div class="flex justify-left items-center gap-1"><button class="text-4xl cursor-pointer p-2 bg-transparent border-none transition-transform duration-200 focus:outline-none scale-100 opacity-100" aria-label="sad">😞</button><button class="text-4xl cursor-pointer p-2 bg-transparent border-none transition-transform duration-200 focus:outline-none scale-100 opacity-100" aria-label="neutral">😐</button><button class="text-4xl cursor-pointer p-2 bg-transparent border-none transition-transform duration-200 focus:outline-none scale-100 opacity-100" aria-label="happy">😊</button></div></div><ul class="table-of-contents table-of-contents__left-border"><li><a href="#configuration" class="table-of-contents__link toc-highlight">Configuration</a><ul><li><a href="#setting-configuration-values" class="table-of-contents__link toc-highlight">Setting Configuration Values</a></li><li><a href="#getting-configuration-values" class="table-of-contents__link toc-highlight">Getting Configuration Values</a></li><li><a href="#common-configuration-keys" class="table-of-contents__link toc-highlight">Common Configuration Keys</a></li></ul></li><li><a href="#using-contracts-in-scripts-and-transactions" class="table-of-contents__link toc-highlight">Using Contracts in Scripts and Transactions</a><ul><li><a href="#address-replacement" class="table-of-contents__link toc-highlight">Address Replacement</a></li><li><a href="#using-flowjson-for-contract-imports" class="table-of-contents__link toc-highlight">Using <code>flow.json</code> for Contract Imports</a></li><li><a href="#setting-up" class="table-of-contents__link toc-highlight">Setting Up</a></li></ul></li><li><a href="#wallet-interactions" class="table-of-contents__link toc-highlight">Wallet Interactions</a><ul><li><a href="#authenticate" class="table-of-contents__link toc-highlight"><code>authenticate</code></a></li><li><a href="#unauthenticate" class="table-of-contents__link toc-highlight"><code>unauthenticate</code></a></li><li><a href="#reauthenticate" class="table-of-contents__link toc-highlight"><code>reauthenticate</code></a></li><li><a href="#signup" class="table-of-contents__link toc-highlight"><code>signUp</code></a></li><li><a href="#login" class="table-of-contents__link toc-highlight"><code>logIn</code></a></li><li><a href="#authz" class="table-of-contents__link toc-highlight"><code>authz</code></a></li></ul></li><li><a href="#current-user" class="table-of-contents__link toc-highlight">Current User</a><ul><li><a href="#currentusersubscribe" class="table-of-contents__link toc-highlight"><code>currentUser.subscribe</code></a></li><li><a href="#currentusersnapshot" class="table-of-contents__link toc-highlight"><code>currentUser.snapshot</code></a></li><li><a href="#currentuserauthenticate" class="table-of-contents__link toc-highlight"><code>currentUser.authenticate</code></a></li><li><a href="#currentuserunauthenticate" class="table-of-contents__link toc-highlight"><code>currentUser.unauthenticate</code></a></li><li><a href="#currentuserauthorization" class="table-of-contents__link toc-highlight"><code>currentUser.authorization</code></a></li><li><a href="#currentusersignusermessage" class="table-of-contents__link toc-highlight"><code>currentUser.signUserMessage</code></a></li></ul></li><li><a href="#discovery" class="table-of-contents__link toc-highlight">Discovery</a><ul><li><a href="#discovery-1" class="table-of-contents__link toc-highlight"><code>discovery</code></a></li><li><a href="#suggested-configuration" class="table-of-contents__link toc-highlight">Suggested Configuration</a></li><li><a href="#authn" class="table-of-contents__link toc-highlight">authn</a></li><li><a href="#discoveryauthnsnapshot" class="table-of-contents__link toc-highlight"><code>discovery.authn.snapshot()</code></a></li><li><a href="#discoveryauthnsubscribecallback" class="table-of-contents__link toc-highlight"><code>discovery.authn.subscribe(callback)</code></a></li></ul></li><li><a href="#on-chain-interactions" class="table-of-contents__link toc-highlight">On-chain Interactions</a><ul><li><a href="#query-and-mutate-flow-with-cadence" class="table-of-contents__link toc-highlight">Query and Mutate Flow with Cadence</a></li><li><a href="#query" class="table-of-contents__link toc-highlight"><code>query</code></a></li><li><a href="#mutate" class="table-of-contents__link toc-highlight"><code>mutate</code></a></li><li><a href="#verifyusersignatures-deprecated" class="table-of-contents__link toc-highlight"><code>verifyUserSignatures</code> (Deprecated)</a></li></ul></li><li><a href="#apputils" class="table-of-contents__link toc-highlight">AppUtils</a><ul><li><a href="#apputilsverifyusersignatures" class="table-of-contents__link toc-highlight"><code>AppUtils.verifyUserSignatures</code></a></li><li><a href="#apputilsverifyaccountproof" class="table-of-contents__link toc-highlight"><code>AppUtils.verifyAccountProof</code></a></li><li><a href="#query-and-mutate-the-blockchain-with-builders" class="table-of-contents__link toc-highlight">Query and mutate the blockchain with Builders</a></li><li><a href="#send" class="table-of-contents__link toc-highlight"><code>send</code></a></li><li><a href="#decode" class="table-of-contents__link toc-highlight"><code>decode</code></a></li></ul></li><li><a href="#builders" class="table-of-contents__link toc-highlight">Builders</a><ul><li><a href="#query-builders" class="table-of-contents__link toc-highlight">Query Builders</a></li><li><a href="#getaccount" class="table-of-contents__link toc-highlight"><code>getAccount</code></a></li><li><a href="#getblock" class="table-of-contents__link toc-highlight"><code>getBlock</code></a></li><li><a href="#atblockheight" class="table-of-contents__link toc-highlight"><code>atBlockHeight</code></a></li><li><a href="#atblockid" class="table-of-contents__link toc-highlight"><code>atBlockId</code></a></li><li><a href="#getblockheader" class="table-of-contents__link toc-highlight"><code>getBlockHeader</code></a></li><li><a href="#geteventsatblockheightrange" class="table-of-contents__link toc-highlight"><code>getEventsAtBlockHeightRange</code></a></li><li><a href="#geteventsatblockids" class="table-of-contents__link toc-highlight"><code>getEventsAtBlockIds</code></a></li><li><a href="#getcollection" class="table-of-contents__link toc-highlight"><code>getCollection</code></a></li><li><a href="#gettransactionstatus" class="table-of-contents__link toc-highlight"><code>getTransactionStatus</code></a></li><li><a href="#gettransaction" class="table-of-contents__link toc-highlight"><code>getTransaction</code></a></li><li><a href="#subscribeevents" class="table-of-contents__link toc-highlight"><code>subscribeEvents</code></a></li><li><a href="#getevents-deprecated" class="table-of-contents__link toc-highlight"><code>getEvents</code> (Deprecated)</a></li><li><a href="#getlatestblock-deprecated" class="table-of-contents__link toc-highlight"><code>getLatestBlock</code> (Deprecated)</a></li><li><a href="#getblockbyid-deprecated" class="table-of-contents__link toc-highlight"><code>getBlockById</code> (Deprecated)</a></li><li><a href="#getblockbyheight-deprecated" class="table-of-contents__link toc-highlight"><code>getBlockByHeight</code> (Deprecated)</a></li><li><a href="#utility-builders" class="table-of-contents__link toc-highlight">Utility Builders</a></li><li><a href="#arg" class="table-of-contents__link toc-highlight"><code>arg</code></a></li><li><a href="#args" class="table-of-contents__link toc-highlight"><code>args</code></a></li><li><a href="#template-builders" class="table-of-contents__link toc-highlight">Template Builders</a></li><li><a href="#script" class="table-of-contents__link toc-highlight"><code>script</code></a></li><li><a href="#transaction" class="table-of-contents__link toc-highlight"><code>transaction</code></a></li></ul></li><li><a href="#pre-built-interactions" class="table-of-contents__link toc-highlight">Pre-built Interactions</a><ul><li><a href="#account" class="table-of-contents__link toc-highlight"><code>account</code></a></li><li><a href="#block" class="table-of-contents__link toc-highlight"><code>block</code></a></li><li><a href="#latestblock-deprecated" class="table-of-contents__link toc-highlight"><code>latestBlock</code> (Deprecated)</a></li></ul></li><li><a href="#transaction-status-utility" class="table-of-contents__link toc-highlight">Transaction Status Utility</a><ul><li><a href="#tx" class="table-of-contents__link toc-highlight"><code>tx</code></a></li></ul></li><li><a href="#event-polling-utility" class="table-of-contents__link toc-highlight">Event Polling Utility</a><ul><li><a href="#events" class="table-of-contents__link toc-highlight"><code>events</code></a></li></ul></li><li><a href="#types-interfaces-and-definitions" class="table-of-contents__link toc-highlight">Types, Interfaces, and Definitions</a><ul><li><a href="#builders-1" class="table-of-contents__link toc-highlight"><code>Builders</code></a></li><li><a href="#interaction" class="table-of-contents__link toc-highlight"><code>Interaction</code></a></li><li><a href="#currentuserobject" class="table-of-contents__link toc-highlight"><code>CurrentUserObject</code></a></li><li><a href="#authorizationobject" class="table-of-contents__link toc-highlight"><code>AuthorizationObject</code></a></li><li><a href="#signableobject" class="table-of-contents__link toc-highlight"><code>SignableObject</code></a></li><li><a href="#accountobject" class="table-of-contents__link toc-highlight"><code>AccountObject</code></a></li><li><a href="#address" class="table-of-contents__link toc-highlight"><code>Address</code></a></li><li><a href="#argumentobject" class="table-of-contents__link toc-highlight"><code>ArgumentObject</code></a></li><li><a href="#argumentfunction" class="table-of-contents__link toc-highlight"><code>ArgumentFunction</code></a></li><li><a href="#authorization-function" class="table-of-contents__link toc-highlight"><code>Authorization Function</code></a></li><li><a href="#signing-function" class="table-of-contents__link toc-highlight"><code>Signing Function</code></a></li><li><a href="#transactionobject" class="table-of-contents__link toc-highlight"><code>TransactionObject</code></a></li><li><a href="#transactionrolesobject" class="table-of-contents__link toc-highlight"><code>TransactionRolesObject</code></a></li><li><a href="#transactionstatusobject" class="table-of-contents__link toc-highlight"><code>TransactionStatusObject</code></a></li><li><a href="#eventname" class="table-of-contents__link toc-highlight"><code>EventName</code></a></li><li><a href="#contract" class="table-of-contents__link toc-highlight"><code>Contract</code></a></li><li><a href="#keyobject" class="table-of-contents__link toc-highlight"><code>KeyObject</code></a></li><li><a href="#proposalkeyobject" class="table-of-contents__link toc-highlight"><code>ProposalKeyObject</code></a></li><li><a href="#blockobject" class="table-of-contents__link toc-highlight"><code>BlockObject</code></a></li><li><a href="#blockheaderobject" class="table-of-contents__link toc-highlight"><code>BlockHeaderObject</code></a></li><li><a href="#collectionguaranteeobject" class="table-of-contents__link toc-highlight"><code>CollectionGuaranteeObject</code></a></li><li><a href="#collectionobject" class="table-of-contents__link toc-highlight"><code>CollectionObject</code></a></li><li><a href="#responseobject" class="table-of-contents__link toc-highlight"><code>ResponseObject</code></a></li><li><a href="#event-object" class="table-of-contents__link toc-highlight"><code>Event Object</code></a></li><li><a href="#transaction-statuses" class="table-of-contents__link toc-highlight"><code>Transaction Statuses</code></a></li><li><a href="#grpc-statuses" class="table-of-contents__link toc-highlight"><code>GRPC Statuses</code></a></li><li><a href="#ftype" class="table-of-contents__link toc-highlight"><code>FType</code></a></li><li><a href="#eventfilter" class="table-of-contents__link toc-highlight"><code>EventFilter</code></a></li><li><a href="#streamconnection" class="table-of-contents__link toc-highlight"><code>StreamConnection</code></a></li><li><a href="#eventstream" class="table-of-contents__link toc-highlight"><code>EventStream</code></a></li><li><a href="#blockheartbeat" class="table-of-contents__link toc-highlight"><code>BlockHeartbeat</code></a></li><li><a href="#signatureobject" class="table-of-contents__link toc-highlight">SignatureObject</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Documentation</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/build/getting-started/contract-interaction">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/tools">SDK's & Tools</a></li><li class="footer__item"><a href="https://cadence-lang.org/docs/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cadence</a></li><li class="footer__item"><a class="footer__link-item" href="/build/guides/mobile/overview">Mobile</a></li><li class="footer__item"><a class="footer__link-item" href="/tools/clients/fcl-js">FCL</a></li><li class="footer__item"><a class="footer__link-item" href="/build/smart-contracts/testing">Testing</a></li><li class="footer__item"><a class="footer__link-item" href="/tools/flow-cli">CLI</a></li><li class="footer__item"><a class="footer__link-item" href="/tools/emulator">Emulator</a></li><li class="footer__item"><a href="https://github.com/onflow/fcl-dev-wallet" target="_blank" rel="noopener noreferrer" class="footer__link-item">Dev Wallet<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/tools/vscode-extension">VS Code Extension</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/ecosystem">Ecosystem</a></li><li class="footer__item"><a href="https://port.onflow.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Flow Port<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/onflow/developer-grants" target="_blank" rel="noopener noreferrer" class="footer__link-item">Developer Grants<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://flow.com/flow-responsible-disclosure" target="_blank" rel="noopener noreferrer" class="footer__link-item">Responsible Disclosure<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.flowverse.co/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Flowverse<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://academy.ecdao.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Emerald Academy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://floats.city/" target="_blank" rel="noopener noreferrer" class="footer__link-item">FLOATs (Attendance NFTs)<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Start Building</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://play.flow.com/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Flow Playground<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://cadence-lang.org/docs/tutorial/first-steps" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cadence Tutorials</a></li><li class="footer__item"><a href="https://open-cadence.onflow.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cadence Cookbook<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/build/core-contracts">Core Contracts & Standards</a></li><li class="footer__item"><a class="footer__link-item" href="/evm/about">EVM</a></li></ul></div><div class="col footer__col"><div class="footer__title">Network</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://status.onflow.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Network Status<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://flowdscan.io/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Flowscan Mainnet<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://testnet.flowscan.io/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Flowscan Testnet<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/networks/node-ops/node-operation/past-sporks">Past Sporks</a></li><li class="footer__item"><a class="footer__link-item" href="/networks/node-ops/node-operation/upcoming-sporks">Upcoming Sporks</a></li><li class="footer__item"><a class="footer__link-item" href="/networks/node-ops">Node Operation</a></li><li class="footer__item"><a class="footer__link-item" href="/networks/node-ops/node-operation/spork">Spork Information</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/onflow" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://discord.gg/flow" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://forum.onflow.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Forum<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://onflow.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">OnFlow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://flow.com/blog" target="_blank" rel="noopener noreferrer" class="footer__link-item">Blog<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 Flow, Inc. Built with Docusaurus.</div></div></div></footer></div> </body> </html>