将连接钱包按钮添加到 HTML - Solana 区块链

Question

我正在尝试在 Solana 区块链上创建一个 Django/Python 应用程序。我一直在想办法像在这个网站上一样在 HTML 上添加“连接钱包”按钮。 enter link description here

如果有人能指导我，我将不胜感激。

提前致谢，最好的祝福，沙山克

编辑： 我不知道如何使用下面 Whosebug 页面中的信息。 Solana : Adding Sollet / Phantom Wallet Connect to my website - Steps?

我已经通过以下链接成功地使用 saber 页面复制了页面，但是整个页面是用 JS 创建的，而不是 HTML。那个 JS 超过 20k 行。 https://app.saber.so/static/js/2.40df4ba6.chunk.js https://app.saber.so/static/js/main.cc5b37d9.chunk.js

我还查看了如下所示的其他项目，以了解如何设置 'connect button'。下面的例子连接了一个 metamask 钱包。 http://blog.adnansiddiqi.me/develop-your-first-decentralized-ecommerce-application-with-python-flask-and-metamask/

我也尝试联系了 Fiverr 上的几个人，如果有人可以指导但也没有运气。

我想要的只是一个“连接钱包”按钮，其工作方式类似于 saber.so 网站。然后使用 python.

读取钱包内容

如果有人能指导我，我将不胜感激。

截图如下：

以下代码：

<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>

Answer 1

这将向您展示如何使用最佳实践来做到这一点。

https://github.com/solana-labs/dapp-scaffold

Answer 2

终于找到解决办法了。上述 Chase Barker 的回复帮助我进一步了解 github。我找到了 https://github.com/solana-labs/wallet-adapter#build-from-source。我在 medium post 下面遇到了 React 用作 Django 的插件。这很有帮助。 https://medium.com/analytics-vidhya/how-to-use-react-in-django-the-hard-way-6ef2bf8c5d6f

我必须编译钱包适配器并将 JS CSS 和 HTML 提取到我的 Django 项目中。

现在按钮可以正常使用了。唯一的问题是，我无法将数据返回到我的 Views.py，为此我可能不得不尝试不同的方法。我会在这个问题上添加更多信息，以防其他人需要帮助。

将连接钱包按钮添加到 HTML - Solana 区块链

Adding connect wallet button to HTML - Solana blockchain

javascript

html

python-3.x

django

solana