How to Integrate with the Flow Blockchain with Magic
How to Integrate with the Flow Blockchain with Magic
#Installation
Magic interacts with the Flow blockchain via Magic's extension NPM package @magic-ext/flow. The Flow extension also lets you interact with the blockchain using methods from Flow's Javascript SDK.
You can skip straight to our kitchen sink example directly:
👉 Flow Example
If this is your first time using Magic with Flow, you may need to wait up to 30 seconds after clicking the magic link before your login completes because Magic has to wait for the Flow blockchain to confirm a transaction that creates your account.
#NPM
01npm install --save @magic-ext/flow
#Yarn
01yarn add @magic-ext/flow
#Initializing Extension
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { FlowExtension } from '@magic-ext/flow';
03
04const magic = new Magic('YOUR_API_KEY', {
05 extensions: [
06 new FlowExtension({
07 rpcUrl: 'https://rest-testnet.onflow.org',
08 network: 'testnet' // testnet or mainnet to connect different network
09 }),
10 ],
11});
You have to use the Magic LIVE API KEY with Flow Mainnet and Magic TEST API KEY with Flow Testnet, because which network to create your account according to the API KEY.
#Send Transaction
#Getting Test Flow
Before you can send transaction on the Flow blockchain, you'll need to acquire some test Flow (Flow's native cryptocurrency for test network).
- Go to our Flow Example application
- Login with your email address
- Copy your Flow public address
- Go to the Flow Faucet
- Fill in the form and paste your copied Flow public address in the Address field.
- You can receive 1000 test Flow
- Now you can use your test Flow in our example app
#Call Extension Method
Note that the Magic Flow extension follows the method names and conventions of Flow's Javascript SDK. You can use the magic.flow.authorization() method to replace the fcl.authenticate().
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { FlowExtension } from '@magic-ext/flow';
03import * as fcl from '@onflow/fcl';
04
05const magic = new Magic('YOUR_API_KEY', {
06 extensions: [
07 new FlowExtension({
08 rpcUrl: 'https://rest-testnet.onflow.org',
09 network: 'testnet' // testnet or mainnet to connect different network
10 }),
11 ],
12});
13
14// CONFIGURE ACCESS NODE
15fcl.config().put('accessNode.api', 'https://rest-testnet.onflow.org');
16
17// CONFIGURE WALLET
18// replace with your own wallets configuration
19// Below is the local environment configuration for the dev-wallet
20fcl.config().put('challenge.handshake', 'http://access-001.devnet9.nodes.onflow.org:8000');
21
22const AUTHORIZATION_FUNCTION = magic.flow.authorization;
23
24const verify = async () => {
25 try {
26 const getReferenceBlock = async () => {
27 const response = await fcl.send([fcl.getLatestBlock()]);
28 const data = await fcl.decode(response);
29 return data.id;
30 };
31
32 console.log('SENDING TRANSACTION');
33 var response = await fcl.send([
34 fcl.transaction`
35 transaction {
36 var acct: AuthAccount
37
38 prepare(acct: AuthAccount) {
39 self.acct = acct
40 }
41
42 execute {
43 log(self.acct.address)
44 }
45 }
46 `,
47 fcl.ref(await getReferenceBlock()),
48 fcl.proposer(AUTHORIZATION_FUNCTION),
49 fcl.authorizations([AUTHORIZATION_FUNCTION]),
50 fcl.payer(AUTHORIZATION_FUNCTION),
51 ]);
52 console.log('TRANSACTION SENT');
53 console.log('TRANSACTION RESPONSE', response);
54
55 console.log('WAITING FOR TRANSACTION TO BE SEALED');
56 var data = await fcl.tx(response).onceSealed();
57 console.log('TRANSACTION SEALED', data);
58
59 if (data.status === 4 && data.statusCode === 0) {
60 console.log('Congrats!!! I Think It Works');
61 } else {
62 console.log(`Oh No: ${data.errorMessage}`);
63 }
64 } catch (error) {
65 console.error('FAILED TRANSACTION', error);
66 }
67};