<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Okhai Omotuebe</title>
    <description>The latest articles on DEV Community by Okhai Omotuebe (@okhai).</description>
    <link>https://dev.to/okhai</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F809162%2F15f61ddb-2c67-41c0-8d4d-68c3ed4138f4.jpeg</url>
      <title>DEV Community: Okhai Omotuebe</title>
      <link>https://dev.to/okhai</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/okhai"/>
    <language>en</language>
    <item>
      <title>Web3 Application Wallet Authentication and npm Package Solution</title>
      <dc:creator>Okhai Omotuebe</dc:creator>
      <pubDate>Mon, 15 Aug 2022 14:40:00 +0000</pubDate>
      <link>https://dev.to/okhai/web3-application-wallet-authentication-and-npm-package-solution-40</link>
      <guid>https://dev.to/okhai/web3-application-wallet-authentication-and-npm-package-solution-40</guid>
      <description>&lt;h4&gt;
  
  
  Knowledge Requirement
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;nodejs&lt;/li&gt;
&lt;li&gt;npm&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Wallet authentication and connection is an essential step in building a web3 application. Every web3 application (dApp) needs to connect to the blockchain using wallets like &lt;a href="https://docs.metamask.io/guide/getting-started.html#basic-considerations"&gt;metamask&lt;/a&gt;, &lt;a href="https://docs.cloud.coinbase.com/wallet-sdk/docs"&gt;coinbase wallet&lt;/a&gt;..., in order to execute transactions.&lt;/p&gt;

&lt;p&gt;There are two ways of handling the connection phase; writing pure javascript code or using an npm package solution.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FiMtsTeN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbgvrrfa0tge5pjp3nnp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FiMtsTeN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbgvrrfa0tge5pjp3nnp.jpg" alt="Screenshot of a JavaScript code screen" width="880" height="495"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Pure JavaScript Solution
&lt;/h3&gt;

&lt;p&gt;I first learned to build a connection to the blockchain using the Metamask wallet, and I had to write javascript specific to connecting Metamask. The issue with this is that there are many wallets out there, and I knew it will be a pain to write and maintain javascript code for every wallet solution one choose to accommodate. &lt;/p&gt;

&lt;h3&gt;
  
  
  npm Package Solution
&lt;/h3&gt;

&lt;p&gt;npm packages enable developers to share and reuse code packages. For web3 authentication and connection solutions open source developers have built various npm packages to solve this issue.&lt;/p&gt;

&lt;p&gt;Examples of such packages are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.npmjs.com/package/web3modal"&gt;Web3modal&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.npmjs.com/package/@rainbow-me/rainbowkit"&gt;Rainbowkit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/Uniswap/web3-react"&gt;web3-react&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Takeaways
&lt;/h3&gt;

&lt;p&gt;I recommend developers to look into both npm package solutions before trying to build their web3 wallet connection from scratch. Larger teams can dedicate resources to analyzing and supporting the codebase of their npm package solution of choice.&lt;/p&gt;

&lt;h4&gt;
  
  
  Aside
&lt;/h4&gt;

&lt;p&gt;One thing to look out for when choosing a package is to look out for the community behind the project. &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>web3</category>
      <category>opensource</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
