Installation

Magic interacts with the Algorand blockchain via Magic’s extension NPM package @magic-ext/algorand. The Algorand extension also lets you interact with the blockchain using methods from Algorand’s JavaScript SDK.
NOTEYou can skip straight to our kitchen sink example directly:Algorand Example
npm install --save @magic-ext/algorand

Initialization

JavaScript
import { Magic } from 'magic-sdk';
import { AlgorandExtension } from '@magic-ext/algorand';

const magic = new Magic('YOUR_API_KEY', {
  extensions: {
    algorand: new AlgorandExtension({
      rpcUrl: '', // should remain empty
    }),
  },
});

Common Methods

Get Test Algorand Before you can send transaction on the Algorand blockchain, you’ll need to acquire some test Algorand.
  1. Go to our Algorand Example application
  2. Login with your email address
  3. Copy your Algorand public address
  4. Go to theAlgorand Faucet
  5. Paste your copied Algorand public address in the text input
  6. Now you can use your test Algorand in our example app

Get Wallet

Use the getWallet function to get the Algorand public address for the current user.
JavaScript
import { Magic } from 'magic-sdk';
import { AlgorandExtension } from '@magic-ext/algorand';

const magic = new Magic('YOUR_API_KEY', {
  extensions: {
    algorand: new AlgorandExtension({
      rpcUrl: '',
    }),
  },
});

// Get user's Algorand public address
const publicAddress = await magic.algorand.getWallet();
console.log('algorand public address', publicAddress);

Sign Transaction

Note that the Magic Algorand extension follows the method names and conventions by Algorand’s JavaScript SDK. To sign a standard Algorand blockchain transaction, you can call the magic.algorand.signTransaction() method.
JavaScript
import { Magic } from 'magic-sdk';
import { AlgorandExtension } from '@magic-ext/algorand';

const magic = new Magic('YOUR_API_KEY', {
  extensions: {
    algorand: new AlgorandExtension({
      rpcUrl: '',
    }),
  },
});

const sendPaymentTransaction = async () => {
  // Construct Payload
  let params = await algodClient.getTransactionParams().do();
  let note = new TextEncoder().encode("Hello World");
  let txn = algosdk.makePaymentTxnWithSuggestedParams(
    from,
    to,
    amount,
    closeRemainderTo,
    note,
    params
  );
  console.log("txn", txn);

  // Sign Payload
  let encodedTxn = algosdk.encodeObj(txn.get_obj_for_encoding());
  const signedTxn = await magic.algorand.signTransaction(encodedTxn);
  // Broadcast Tx
  const hash = await algodClient.sendRawTransaction(signedTxn.blob).do();
  console.log("hash", hash);
  // Wait for confirmation
  const receipt = await waitForConfirmation(algodClient, hash.txId, 4);
  console.log("receipt", receipt);
};

const sendAssetConfigTransaction = async () => {
  // Construct Payload
  let params = await algodClient.getTransactionParams().do();
  let txn = algosdk.makeAssetCreateTxnWithSuggestedParams(
    from,
    note,
    totalSupply,
    decimals,
    defaultFrozen,
    manager,
    reserve,
    freeze,
    clawback,
    unitName,
    assetName,
    assetURL,
    assetMetadataHash
    params
  );
  console.log("txn", txn);

  // Sign Payload
  let encodedTxn = algosdk.encodeObj(txn.get_obj_for_encoding());
  const signedTxn = await magic.algorand.signTransaction(encodedTxn);
  // Broadcast Tx
  const hash = await algodClient.sendRawTransaction(signedTxn.blob).do();
  console.log("hash", hash);
  // Wait for confirmation
  const receipt = await waitForConfirmation(algodClient, hash.txId, 4);
  console.log("receipt", receipt);
};

const sendAssetTransferTransaction = async () => {
  // Construct Payload
  let params = await algosdk.getTransactionParams().do();
  let txn = algosdk.makeAssetTransferTxnWithSuggestedParams(
    from,
    to,
    closeRemainderTo,
    revocationTarget,
    amount,
    note,
    assetIndex, // can get from from acfg tx receipt
    params
  );

  // Sign Payload
  let encodedTxn = algosdk.encodeObj(txn.get_obj_for_encoding());
  const signedTxn = await magic.algorand.signTransaction(encodedTxn);
  // Broadcast Tx
  const hash = await algosdk.sendRawTransaction(signedTxn.blob).do();
  console.log("hash", hash);
  // Wait for confirmation
  const receipt = await waitForConfirmation(algosdk, hash.txId, 4);
  console.log("receipt", receipt);
};

Sign Bid

Note that the Magic Algorand extension follows the method names and conventions by Algorand’s JavaScript SDK. To sign a standard Algorand blockchain Bid, you can call the magic.algorand.signBid() method.
JavaScript
import { Magic } from 'magic-sdk';
import { AlgorandExtension } from '@magic-ext/algorand';

const magic = new Magic('YOUR_API_KEY', {
  extensions: {
    algorand: new AlgorandExtension({
      rpcUrl: '',
    }),
  },
});

const bid = {
  bidderKey: 'IB3NJALXLDX5JLYCD4TMTMLVCKDRZNS4JONHMIWD6XM7DSKYR7MWHI6I7U',
  auctionKey: '7ZUECA7HFLZTXENRV24SHLU4AVPUTMTTDUFUBNBD64C73F3UHRTHAIOF6Q',
  bidAmount: 1000,
  maxPrice: 10,
  bidID: 2,
  auctionID: 56,
};

const tx = await magic.algorand.signBid(bid);

console.log('signed bid', tx);

Sign Group Transaction

To sign a standard Algorand blockchain Group transaction with magic user, you can call the magic.algorand.signGroupTransaction() method.
JavaScript

import { Magic } from "magic-sdk";
import { AlgorandExtension } from "@magic-ext/algorand";
const algosdk = require('algosdk');

const magic = new Magic('YOUR_API_KEY', {
  extensions: {
    algorand: new AlgorandExtension({
      rpcUrl: ''
    })
  }
});

let client = null;
async function setupClient() {
  if( client == null){
    const token = {
      "x-api-key": "x api key"
    };
    const server = "algorand rpc url";
    const port = '';
    let algodClient = new algosdk.Algodv2(token, server, port);
    client = algodClient;
  } else {
    return client;
  }
  return client;
}


let algodClient = await setupClient();

let params = await algodClient.getTransactionParams().do();

const txns = [{
  from: 'magic user public address',
  to: 'OFHW3Z3T2RML7J2S6KYGHPAMO6IQH76PE2HSCAIN5U5NBGXAIPBOY7DCHI',
  amount: 1000000,
  closeRemainderTo: undefined,
  note: undefined,
  suggestedParams: params,
},
  {
    from: 'magic user public address',
    to: 'XRKQBEV7FINQ66SYAFY33UYHOC4GRAICWI3V6V2TXLCQMPJBGGRHLG2E74',
    amount: 1000000,
    closeRemainderTo: undefined,
    note: undefined,
    suggestedParams: params,
  }
]

const signedTX = await magic.algorand.signGroupTransaction(txns);

console.log("signedTX", signedTX);

Sign Group Transaction V2

To sign a standard Algorand blockchain Group transaction with magic user, you can call the magic.algorand.signGroupTransactionV2() method.
JavaScript
import { Magic } from "magic-sdk";
import { AlgorandExtension } from "@magic-ext/algorand";
const algosdk = require('algosdk');

const magic = new Magic('YOUR_API_KEY', {
  extensions: {
    algorand: new AlgorandExtension({
      rpcUrl: ''
    })
  }
});

let client = null;
async function setupClient() {
  if( client == null){
    const token = {
      "x-api-key": "x api key"
    };
    const server = "algorand rpc url";
    const port = '';
    let algodClient = new algosdk.Algodv2(token, server, port);
    client = algodClient;
  } else {
    return client;
  }
  return client;
}


let algodClient = await setupClient();

let params = await algodClient.getTransactionParams().do();

const txns = [{
  from: 'magic user public address',
  to: 'OFHW3Z3T2RML7J2S6KYGHPAMO6IQH76PE2HSCAIN5U5NBGXAIPBOY7DCHI',
  amount: 1000000,
  closeRemainderTo: undefined,
  note: undefined,
  suggestedParams: params,
},
  {
    from: 'magic user public address',
    to: 'XRKQBEV7FINQ66SYAFY33UYHOC4GRAICWI3V6V2TXLCQMPJBGGRHLG2E74',
    amount: 1000000,
    closeRemainderTo: undefined,
    note: undefined,
    suggestedParams: params,
  }
]

const signedTX = await magic.algorand.signGroupTransaction(txns);

console.log("signedTX", signedTX);

Resources