Error logging icrc1 token name in frontend

Developers Getting Started
,
1

Why am I not seeing a response to my query here?
How do I call a function on the canister from my frontend?

import { token_lobby_backend } from "../../declarations/token_lobby_backend";
import { idlFactory } from "../../declarations/token/token.did.js";

document.querySelector("form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const button = e.target.querySelector("button");

  const name = document.getElementById("name").value.toString();

  button.setAttribute("disabled", true);

  const token = "avqkn-guaaa-aaaaa-qaaea-cai"
  const whitelist = [token];
  await window.ic.plug.requestConnect({
          whitelist,
        });
        var p = await window.ic.plug.agent.getPrincipal();
        //setAccAdd(p.toString());
        console.log(p.toString());
        const a = {
          owner: p,
          subaccount: [],
        }
        const actor = await window.ic.plug.createActor({
          canisterId: token,
          interfaceFactory: idlFactory,
        });
        console.log(actor);
        console.log("asking for name")
        const token_name = await actor.icrc1_name();
        console.log(token_name); //this line does not show in console logs

image

Why am I not seeing a response?

2

I would expect some sort of error in that case. Are there network requests going out anywhere? Since you appear to be on 127.0.0.1:4943 I would also expect that you need to set the host somewhere, but maybe Plug takes care of that for you

3

Attached is the network activity.

Is there a recommended wallet by DFINITY? It would be great to have a complete hello world PLUS wallet integration example end-to-end.

image-capture
image-capture1003×236 48.4 KB

4

Dfinity has refrained from endorsing wallets. The main strategy we’ve endorsed in terms of documentation is using Internet Identity, as we’ve done in the NNS Dapp

5

Ok, does the code make sense? I would expect

 const actor = await window.ic.plug.createActor({
          canisterId: token,
          interfaceFactory: idlFactory,
        });
        console.log(actor);
        console.log("asking for name")
        const token_name = await actor.icrc1_name();
        console.log(token_name); //this line does not show in console

to work - do you have a sample project that reads read only data from a canister?

6

On the surface, it looks like that would work. Is there an error being thrown? Also, what’s happening in the network tab?