<p dir="auto">Today, while working on Dash integration, I was looking for some help & I asked chatGPT. While asking, I missed typing Dash & simply stated that, integrate web3 login. Because of the lack of the context, it suggested me MetaMask based login. This was not what I was looking for. However, upon going through the answer provided to me, I found it helpful. So, instead of focusing on integrating Dash, I switched to MetaMask login for today.
<h3>MetaMask integration
<ul>
<li><span>Source link 1 - <a href="https://docs.metamask.io/wallet/connect/metamask-sdk/javascript/pure-js/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://docs.metamask.io/wallet/connect/metamask-sdk/javascript/pure-js/
<li><span>Source link 2 - <a href="https://github.com/MetaMask/metamask-sdk/blob/main/packages/examples/pure-javascript/index.html" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/MetaMask/metamask-sdk/blob/main/packages/examples/pure-javascript/index.html
<p dir="auto">Because I was more interested in plain-javascript based integration, I did a go-through list of documents & found a related one.
<h4>Step 1. Get the SDK Source in app
<pre><code><html>
<head>
<script src="https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js"></script>
</head>
</html>
<h4>Step 2. Connect & get public wallet address of ETH
<pre><code>(html comment removed: Etherium login specific code )
<script>
const mmsdk = new MetaMaskSDK.MetaMaskSDK({
dappMetadata: {
name: "Distriator Connect",
},
});
let provider;
async function loginWithEthereumChain() {
try {
await mmsdk.connect();
if (provider == null) {
provider = mmsdk.getProvider();
}
const address = await provider.request({ method: 'eth_requestAccounts' });
if (address.length > 0) {
return address[0];
} else {
throw 'No account found';
}
} catch (e) {
console.log('ADD ERR', e)
throw e;
}
}
</script>
(html comment removed: Etherium login specific code )
<h3>Demo of MetaMask integration in progress
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmRRKhCGKVrcnaU7MYZNj73R8Rw3MhWzUUWyxSHqAhvGET/screenshot_2024_12_03_at_6.32.17_pm.png" alt="a new item" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmRRKhCGKVrcnaU7MYZNj73R8Rw3MhWzUUWyxSHqAhvGET/screenshot_2024_12_03_at_6.32.17_pm.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmRRKhCGKVrcnaU7MYZNj73R8Rw3MhWzUUWyxSHqAhvGET/screenshot_2024_12_03_at_6.32.17_pm.png 2x" />
<ul>
<li>We have added a new connect item in list of blockchains
<li>New item says "MetaMask"
<li>With it, you can connect your ETH address
<li>It'll only pick the first one from provided addresses
<h3>Connect using MetaMask on Desktop
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmR5N4MEM2jEoo7ctyc6x6P7KgbKbLqGhgVk1ysGhypuS2/screenshot_2024_12_03_at_7.12.15_pm.png" alt="Connect using MetaMask on Desktop" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmR5N4MEM2jEoo7ctyc6x6P7KgbKbLqGhgVk1ysGhypuS2/screenshot_2024_12_03_at_7.12.15_pm.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmR5N4MEM2jEoo7ctyc6x6P7KgbKbLqGhgVk1ysGhypuS2/screenshot_2024_12_03_at_7.12.15_pm.png 2x" />
<ul>
<li>Upon clicking on MetaMask button from Connect Screen, Distriator App will show a pop-up.
<li>Popup will show 2 tabs - Desktop & Mobile.
<li>I took screenshot after switching to Desktop.
<li>Desktop tab will show option to open the MetaMask Extension.
<li>Mobile Option will show QR code which you can scan via MetaMask Mobile app
<h3>MetaMask Extension
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmfRcqkFGmLHB7q6FpPBtWfuxJ4F9Tzx9UWqGK5aMjEhYW/screenshot_2024_12_03_at_7.12.23_pm.png" alt="MetaMask Extension" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmfRcqkFGmLHB7q6FpPBtWfuxJ4F9Tzx9UWqGK5aMjEhYW/screenshot_2024_12_03_at_7.12.23_pm.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmfRcqkFGmLHB7q6FpPBtWfuxJ4F9Tzx9UWqGK5aMjEhYW/screenshot_2024_12_03_at_7.12.23_pm.png 2x" />
<ul>
<li>This is how it will look like when you try to authorize using MetaMask extension
<li>Of course, instead of Localhost, it'll say Distriator. I took screenshot when running locally
<h3>Getting the Address
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmXo4GQUs6TQpgbrftD6Ep3DHWc3awjTqxCGfGYRqjAi43/screenshot_2024_12_03_at_7.14.54_pm.png" alt="Getting the Address" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmXo4GQUs6TQpgbrftD6Ep3DHWc3awjTqxCGfGYRqjAi43/screenshot_2024_12_03_at_7.14.54_pm.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmXo4GQUs6TQpgbrftD6Ep3DHWc3awjTqxCGfGYRqjAi43/screenshot_2024_12_03_at_7.14.54_pm.png 2x" />
<ul>
<li>So far, we are able to get the address
<li>We are yet to connect it with hive account
<li>We are yet to work on other connecting it with a button click event - currently, I executed everything using javascript console.
<h3>Status on all the to-dos
<ul>
<li>💻 Adding signature based verification, validation & account connection
<li>💻 Update Business profile with other blockchain addresses
<li>💻 Allow users to make payments with other blockchain & claim on Distriator
<li>💻 Show businesses with different blockchain payment support
<li>💻 Signup with other blockchain accounts
<li>⏳ Research work on Dash login
<li>💻 Research on World coin login
<li>💻 Research on DOC login
<li>⏳ MetaMask based login
<li>⏳ MetaMask based connect
<li>⏳ MetaMask based disconnect
<li>💻 Distriator rewards on ETH payments
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png 2x" />
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png 2x" />
<p dir="auto"><center>
<p dir="auto"><a href="https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/u/sagarkothari88/avatar" alt="Support @sagarkothari88" />
<h3><a href="https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote sagarkothari88 as Hive Witness
<p dir="auto"><a href="https://witness.the-hive-mobile.app/#/witnesses/@threespeak" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/u/threespeak/avatar" alt="Support @threespeak" />
<h3><a href="https://witness.the-hive-mobile.app/#/witnesses/@threespeak" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for 3Speak as Witness
<p dir="auto">
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQme1eL9v9d8qiTY2KdjUACLN5oMFzUQZP9Rpf8uvDhAnhH/hive_divider.png 2x" />
<h3>Get paid for paying in HBD/Hive & SATs
<h2><span><a href="https://distriator.com" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://distriator.com
<p dir="auto">Credits to designers - noakmilo & josegrech
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmNM1ahigCcZowJYjJRsdCeLXu5vykGa64cmiCPK5mbRZU/photo_2024_04_26_21.08.09.jpeg" alt="image by noakmilo" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmNM1ahigCcZowJYjJRsdCeLXu5vykGa64cmiCPK5mbRZU/photo_2024_04_26_21.08.09.jpeg 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmNM1ahigCcZowJYjJRsdCeLXu5vykGa64cmiCPK5mbRZU/photo_2024_04_26_21.08.09.jpeg 2x" />
<p dir="auto"><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmdNqPB61oSdqMf3x2xcX9qNXimd6iMKccwM8nGEUgjUsa/abnner.png" alt="banner of distriator by josegrech" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmdNqPB61oSdqMf3x2xcX9qNXimd6iMKccwM8nGEUgjUsa/abnner.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmdNqPB61oSdqMf3x2xcX9qNXimd6iMKccwM8nGEUgjUsa/abnner.png 2x" />
<h3><span>Swap your HBD/Hive using <a href="/@ecency">@ecency
<p dir="auto"><img src="https://images.hive.blog/0x0/https://images.ecency.com/DQmQkeawijcZVajC14KdSK2KP9vV4NSBTM1hRFpnCaa47Nr/swap_feature_banner.gif" />
Discord Server.This post has been manually curated by @bhattg from Indiaunited community. Join us on our
Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.
Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.
100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @bhattg by upvoting this comment and support the community by voting the posts made by @indiaunited..
This post received an extra 7.54% vote for delegating HP / holding IUC tokens.
Good evening and peace be upon you. Interesting article
This is a great development.