Adding connect wallet button to HTML - Solana blockchain
Question
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>
2 answers
solution1
1 2021-10-08 16:14:24
This will show you how to do it with best practices.
solution2
0 ACCPTED 2021-10-12 20:59:41
At last I have managed to find a solution. Response from Chase Barker above helped me look further in the github. I foundhttps://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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.