Phoenix <3 Algorand

app.js

import "../css/app.css";
import "phoenix_html";
import { Socket } from "phoenix";
import { LiveSocket } from "phoenix_live_view";
import topbar from "../vendor/topbar";

let Hooks = {};
Hooks.Connect = {
  mounted() {
    this.el.addEventListener("click", (e) => {
      if (typeof AlgoSigner === "undefined") {
         this.pushEvent("user-connected-to-chain-error", {
            address: "You must install AlgoSigner to use this app",
          });
        console.error("AlgoSigner not found");
      }
      AlgoSigner.connect()
        .then((d) => {
          document.getElementById("connect-code").innerHTML = JSON.stringify(d);
        })
        .then(() =>
          AlgoSigner.accounts({
            ledger: "MainNet",
          })
        )
        .then((accountData) => {
          if (!accountData || !accountData.length) {
             this.pushEvent("user-connected-to-chain-error", {
                address: "You must install AlgoSigner to use this app",
             });
             return;
          } 
          this.pushEvent("user-connected-to-chain", {
            address: accountData[0].address,
          });
        })
        .catch((e) => {
          console.error(e);
          document.getElementById("connect-code").innerHTML = JSON.stringify(e);
        });
    });
  },
};

let csrfToken = document
  .querySelector("meta[name='csrf-token']")
  .getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  params: { _csrf_token: csrfToken },
});

topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
window.addEventListener("phx:page-loading-start", (info) => topbar.show());
window.addEventListener("phx:page-loading-stop", (info) => topbar.hide());

liveSocket.connect();

window.liveSocket = liveSocket;