Newb need help with AlgoSDK (JS) and DJango

AlgoSDK
1

I’m learning AlgoSDK (JS) with DJango, and got stuck getting accountInformation(). If I try the below without DJango, it all works.

const algosdk = require("algosdk");
const my_address = "PTTKX5....C2MOVPM"
const algodServer = "http://127.0.0.1";
const algodPort = 35493;
const algodToken = "5685be....234c26b1";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
(async () => {
        let accountInfo = await algodClient.accountInformation(my_address).do();
        console.log(accountInfo);
}) ().catch(e => {
        console.log(e);
});

But with DJango, it causes “ReferenceError: Cannot access ‘algosdk’ before initialization”

Please help.

wAlgoConnect.js

const algosdk = require("algosdk");   // causes ReferenceError: cannot access 'algosdk' before initialization

const algodServer = "http://127.0.0.1";
const algodPort = 35493;
const algodToken = "5685bef....c0234c26b1";

async function getBalance() {
    const addr="PTTKX5V,,,,YC2MOVPM";
    try {        
        const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
        let accountInfo = await algodClient.accountInformation(addr).do();
        alert(accountInfo.amount);
    } catch (err) {
        alert("Error: getBalance() " + err);
    }
}

DJango Template: main.html

{% load static %}

<html>
<head>
	<title>Nurky</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"/>
	<link rel="icon" href="{% static 'favicon-16.png' %}" sizes="16x16" type="image/png"/>
	<style>
		body {
			background-image: url("{% static 'images/bg.jpg' %}");
			background-repeat: repeat;
		}
	</style>
	<script src="{% static 'js/myalgo.min.js' %}"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="{% static 'js/algosdk.min.js' %}"></script>
	<script src="{% static 'js/wAlgoConnect.js' %}"></script>
</head> 
<body> 
..
	<div class="wallet-position">
		<div id="wContent">
			{% if request.session.wAddrShort %}
				{{ request.session.wAlgoBalance }} &nbsp;
				<a href="{% url 'walletDisconnect' %}">
				<button class="wallet-button" type="button" >&nbsp; {{ request.session.wAddrShort }} &nbsp;</button></a>
			{% else %}
				<button class="wallet-button" type="button" onclick="getBalance()">&nbsp; Connect Wallet &nbsp;</button>
			{% endif %}
		</div>
	</div>
..
2 
const algosdk = require("algosdk");

is a JS line to load a JS module in nodeJS.

In your case, you are loading the module from the browser using

	<script src="{% static 'js/algosdk.min.js' %}"></script>

So you don’t need the line above.

See js-algorand-sdk/examples/webapp at develop · algorand/js-algorand-sdk · GitHub for a full example of using algosdk from within the browser.

1 Like
4

Thanks for a reply. That was the first thing I did, as that’s how I got the myalgo.min.js to work, but it causes an error for algosdk when it reaches let accountInfo = await algodClient.accountInformation(addr).do();

Error: Request has been terminated
Possibly causes: the network is offline. Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

This error didn’t make since as that same code works fine from javascript without DJango. And I couldn’t find any reference to the error message, so I started to mess with those declarations.

I looked at the link you posted; the line let accountInfo = await algodClient.accountInformation(addr); doesn’t have do(). I tried it, and it worked!!!

Only problem with this is, with do(), I can get the balance info, but without it, no balance info is returned.

5

Indeed, the .do() seems to be missing from the link above.
You need the .do().

It looks like you are running your own algod.
In that case, you may need to set up CORS properly on your algod.

I would recommend to first try with a free API service such as API for example. And see if it works.

If it works, it most likely confirms you need to set up CORS properly on your algod.
Read here for CORS: Cross-Origin Resource Sharing (CORS) - HTTP | MDN
You may need to set up a reverse proxy for your algod to add the CORS header.

It is possible you are not running into this issue when not using Django as you may be using directly an HTML file in the filesystem which may not trigger CORS.
See also javascript - Bypassing CORS issue in Chrome - Stack Overflow

1 Like
6

I tried the API link, and it works. I’ll start reading up CORS, hopefully, I can figure it out.

Thanks for your help!!!