How to Integrate with the ICON Blockchain with Magic
How to Integrate with the ICON Blockchain with Magic
#Installation
Magic interacts with the ICON blockchain via Magic's extension NPM package @magic-ext/icon. The ICON extension also lets you interact with the blockchain using methods from ICON's Javascript SDK.
You can skip straight to our kitchen sink example directly:
👉 ICON Example
#NPM
01npm install --save @magic-ext/icon
#Yarn
01yarn add @magic-ext/icon
#Initializing Extension
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { IconExtension } from '@magic-ext/icon';
03
04const magic = new Magic('YOUR_API_KEY', {
05 extensions: [
06 new IconExtension({
07 rpcUrl: 'ICON_RPC_NODE_URL',
08 }),
09 ],
10});
#Get User Info
#Get Account
Using getAccount function to get ICON public address for current user.
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { IconExtension } from '@magic-ext/icon';
03
04const magic = new Magic('YOUR_API_KEY', {
05 extensions: [
06 new IconExtension({
07 rpcUrl: 'ICON_RPC_NODE_URL',
08 }),
09 ],
10});
11
12// Get user's ICON public address
13const publicAddress = await magic.icon.getAccount();
14console.log('ICON Public Address: ', publicAddress);
#Send Transaction
#Getting Test ICON
Before you can send transaction on the ICON blockchain, you'll need to acquire some test ICON (ICON's native cryptocurrency for test network).
- Go to our ICON Example application
- Login with your email address
- Copy your ICON public address
- Go to the ICON Faucet
- Paste your copied ICON public address in the text input
- You can receive up to 100 test ICON per day
- Now you can use your test ICON in our example app
#Call sendTransaction Extension Method
Note that the Magic ICON extension follows the method names and conventions by ICON's Javascript SDK. To send a standard ICON blockchain transaction, you can call the magic.icon.sendTransaction method.
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { IconExtension } from '@magic-ext/icon';
03
04import IconService from 'icon-sdk-js';
05
06const { IconBuilder, IconAmount, IconConverter } = IconService;
07
08const magic = new Magic('YOUR_API_KEY', {
09 extensions: [
10 new IconExtension({
11 rpcUrl: 'ICON_RPC_NODE_URL',
12 }),
13 ],
14});
15
16const metadata = await magic.user.getMetadata();
17const destinationAddress = 'hx19f4fc31c6e51d5facccb52e3ccbe6b7d61f409e';
18const sendICXAmount = '10';
19
20// Build a transaction
21const txObj = new IconBuilder.IcxTransactionBuilder()
22 .from(metadata.publicAddress)
23 .to(destinationAddress)
24 .value(IconAmount.of(sendICXAmount, IconAmount.Unit.ICX).toLoop())
25 .stepLimit(IconConverter.toBigNumber(100000))
26 .nid(IconConverter.toBigNumber(3))
27 .nonce(IconConverter.toBigNumber(1))
28 .version(IconConverter.toBigNumber(3))
29 .timestamp(new Date().getTime() * 1000)
30 .build();
31
32// Send a transaction
33const txhash = await magic.icon.sendTransaction(txObj);
34
35console.log(`Transaction Hash: ${txhash}`);
#Call signTransaction Extension Method
To send a standard ICON blockchain transaction, you can call the magic.icon.signTransaction method to get the signature and raw transaction then send to blockchain by yourself.
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { IconExtension } from '@magic-ext/icon';
03
04import IconService from 'icon-sdk-js';
05
06const { IconBuilder, IconAmount, IconConverter } = IconService;
07
08const magic = new Magic('YOUR_API_KEY', {
09 extensions: [
10 new IconExtension({
11 rpcUrl: 'ICON_RPC_NODE_URL',
12 }),
13 ],
14});
15
16const metadata = await magic.user.getMetadata();
17const destinationAddress = 'hx19f4fc31c6e51d5facccb52e3ccbe6b7d61f409e';
18const sendICXAmount = '10';
19
20// Build a transaction
21const txObj = new IconBuilder.IcxTransactionBuilder()
22 .from(metadata.publicAddress)
23 .to(destinationAddress)
24 .value(IconAmount.of(sendICXAmount, IconAmount.Unit.ICX).toLoop())
25 .stepLimit(IconConverter.toBigNumber(100000))
26 .nid(IconConverter.toBigNumber(3))
27 .nonce(IconConverter.toBigNumber(1))
28 .version(IconConverter.toBigNumber(3))
29 .timestamp(new Date().getTime() * 1000)
30 .build();
31
32// Send a transaction
33const { signature, rawTransaction } = await magic.icon.signTransaction(txObj);
34
35console.log(`result:`, signature, rawTransaction);
#Smart Contract
#Deploy Contract
Getting Test ICON
Before you can send transaction on the ICON blockchain, you'll need to acquire some test ICON (ICON's native cryptocurrency for test network).
- Go to our ICON Example application
- Login with your email address
- Copy your ICON public address
- Go to the ICON Faucet
- Paste your copied ICON public address in the text input
- You can receive up to 100 test ICON per day
- Now you can use your test ICON in our example app
Call Extension Method
Note that the Magic ICON extension follows the method names and conventions by ICON's Javascript SDK. Please follow ICON contract deploy documentation to create and compile the smart contract. To deploy an ICON smart contract, you can call the magic.icon.sendTransaction method to send deploy contract transaction.
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02import { IconExtension } from '@magic-ext/icon';
03
04import IconService from 'icon-sdk-js';
05
06const { DeployTransactionBuilder, IconConverter } = IconService;
07
08const magic = new Magic('YOUR_API_KEY', {
09 extensions: [
10 new IconExtension({
11 rpcUrl: 'ICON_RPC_NODE_URL',
12 }),
13 ],
14});
15
16const metadata = await magic.user.getMetadata();
17
18// Build a transaction
19const txObj = new DeployTransactionBuilder()
20 .from(metadata.publicAddress)
21 .to('cx0000000000000000000000000000000000000000')
22 .stepLimit(IconConverter.toBigNumber(2100000000).toString())
23 .nid(IconConverter.toBigNumber(3).toString())
24 .nonce(IconConverter.toBigNumber(1).toString())
25 .version(IconConverter.toBigNumber(3).toString())
26 .timestamp(new Date().getTime() * 1000)
27 .contentType('application/zip')
28 .content(`0x${compiledContractContent}`)
29 .params({
30 initialSupply: IconConverter.toHex('100000000000'),
31 decimals: IconConverter.toHex(18),
32 name: 'StandardToken',
33 symbol: 'ST',
34 })
35 .build();
36
37// Send transaction to deploy contract
38const txhash = await magic.icon.sendTransaction(txObj);
39
40console.log(`Transaction Hash: ${txhash}`);