javascript html python-3.x django solana

Adding connect wallet button to HTML - Solana blockchain

I am trying to create a Django/Python app on Solana blockchain. I have been trying to figure out how I can add "Connect Wallet" button on HTML just like on this website. enter link description here

I would appreciate if anyone can guide me on this.

Thanks in advance, Best regards, Shashank

Edit: I couldn't figure out how I can use information in below stackoverflow page. Solana : Adding Sollet / Phantom Wallet Connect to my website - Steps?

I have managed to replicate the page using saber page by using following links, but whole page is created with JS rather HTML. And that JS is over 20k lines. https://app.saber.so/static/js/2.40df4ba6.chunk.js https://app.saber.so/static/js/main.cc5b37d9.chunk.js

I have also looked up other projects like below, to get an understanding on how I can setup a 'connect button'. Below example connects a metamask wallet. http://blog.adnansiddiqi.me/develop-your-first-decentralized-ecommerce-application-with-python-flask-and-metamask/

I tried to contact few poeple on Fiverr as well, if someone can guide but no luck there as well.

All I want is a button "Connect wallet", which works similar to saber.so website. And then read the wallet contents using python.

I would really appreciate if someone can guide me please.

Screenshot below:

Codes below:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet"/>
    <style>#root{height:100%}</style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
    <link href="/static/assets/css/2.5e01e2e9.chunk.css" rel="stylesheet">
    </head>
    
    <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <script>
    !(function (e) {
        function r(r) {
        for (
            var n, a, f = r[0], i = r[1], l = r[2], p = 0, s = [];
            p < f.length;
            p++
        )
            (a = f[p]),
            Object.prototype.hasOwnProperty.call(o, a) && o[a] && s.push(o[a][0]),
            (o[a] = 0);
        for (n in i) Object.prototype.hasOwnProperty.call(i, n) && (e[n] = i[n]);
        for (c && c(r); s.length; ) s.shift()();
        return u.push.apply(u, l || []), t();
        }
        function t() {
        for (var e, r = 0; r < u.length; r++) {
            for (var t = u[r], n = !0, f = 1; f < t.length; f++) {
            var i = t[f];
            0 !== o[i] && (n = !1);
            }
            n && (u.splice(r--, 1), (e = a((a.s = t[0]))));
        }
        return e;
        }
        var n = {},
        o = { 1: 0 },
        u = [];
        function a(r) {
        if (n[r]) return n[r].exports;
        var t = (n[r] = { i: r, l: !1, exports: {} });
        return e[r].call(t.exports, t, t.exports, a), (t.l = !0), t.exports;
        }
        (a.m = e),
        (a.c = n),
        (a.d = function (e, r, t) {
            a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t });
        }),
        (a.r = function (e) {
            "undefined" != typeof Symbol &&
            Symbol.toStringTag &&
            Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
            Object.defineProperty(e, "__esModule", { value: !0 });
        }),
        (a.t = function (e, r) {
            if ((1 & r && (e = a(e)), 8 & r)) return e;
            if (4 & r && "object" == typeof e && e && e.__esModule) return e;
            var t = Object.create(null);
            if (
            (a.r(t),
            Object.defineProperty(t, "default", { enumerable: !0, value: e }),
            2 & r && "string" != typeof e)
            )
            for (var n in e)
                a.d(
                t,
                n,
                function (r) {
                    return e[r];
                }.bind(null, n)
                );
            return t;
        }),
        (a.n = function (e) {
            var r =
            e && e.__esModule
                ? function () {
                    return e.default;
                }
                : function () {
                    return e;
                };
            return a.d(r, "a", r), r;
        }),
        (a.o = function (e, r) {
            return Object.prototype.hasOwnProperty.call(e, r);
        }),
        (a.p = "/");
        var f = (this["webpackJsonp@saberhq/saber-interface"] =
            this["webpackJsonp@saberhq/saber-interface"] || []),
        i = f.push.bind(f);
        (f.push = r), (f = f.slice());
        for (var l = 0; l < f.length; l++) r(f[l]);
        var c = i;
        t();
    })([]);
    </script>
    <script src="/static/assets/js/2.40df4ba6.chunk.js"></script>
    <script src="/static/assets/js/main.cc5b37d9.chunk.js"></script>
    <script
    defer
    src="https://static.cloudflareinsights.com/beacon.min.js"
    data-cf-beacon='{"rayId":"69a4e8e24ec32e52","token":"42629c83ba6b4869b3a25113283e7fc0","version":"2021.9.0","si":100}'
    ></script>

Solution

At last I have managed to find a solution. Response from Chase Barker above helped me look further in the github. I found https://github.com/solana-labs/wallet-adapter#build-from-source. I came across below medium post where React is used as plugin for Django. This was helpful. https://medium.com/analytics-vidhya/how-to-use-react-in-django-the-hard-way-6ef2bf8c5d6f

I had to compile the wallet-adapter and extract JS CSS and HTML to my Django project.

Now the button works fine. Only thing is, I am not able to get the data back to my Views.py for which I might have to try out different things. I will add further info this question, in case someone else need help with this.