The latest articles on DEV Community by Sharathxct (@sharathxct_19). https://dev.to/sharathxct_19 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%2F2023825%2Fd25b5d54-c8b3-4ebf-84e4-2b5c82466df1.jpeg https://dev.to/sharathxct_19 en Sharathxct Wed, 04 Sep 2024 03:09:16 +0000 https://dev.to/sharathxct_19/solana-wallet-adapter-for-a-web-based-wallet-1b9f https://dev.to/sharathxct_19/solana-wallet-adapter-for-a-web-based-wallet-1b9f <h2> Working of my project wallet adapter for a web based wallet app which is a submission for 100xdev x Superteam hackathon. </h2> <h3> Overview of my web based wallet </h3> <p>My wallet is a nextjs web app (Not extension), where users can create their solana wallet by logging in using google, a wallet automatically gets generated for the user after logging in and user can access the wallet only if they are signed in.<a href="https://dallet-one.vercel.app/" rel="noopener noreferrer">Live</a>, <a href="https://github.com/Sharathxct/dallet/tree/main/apps/dallet" rel="noopener noreferrer">Github</a></p> <p>NOTE: Private keys are stored on the server.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmuj88izipvdk4ecvjvho.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmuj88izipvdk4ecvjvho.png" alt="Wallet homepage" width="800" height="450"></a></p> <h3> Working of my wallet adapter </h3> <p>My wallet adapter is an npm package which will be integrated by dapps to connect to my wallet, this basically exports my WalletAdapter class which extends BaseSignInMessageSignerWalletAdapter which contains the methods to perform connect, signTransaction etc. Go through <a href="https://github.com/anza-xyz/wallet-adapter" rel="noopener noreferrer">solana walletadapter standard</a> to know more. As my wallet now is web app and cannot inject code into other websites unlike web extension, I need to figure out how to make a communication connection between my wallet and the Solana dapps so that I do not give dapps the whole access to wallet instead make them just able to request connection or request signing of transaction etc.</p> <p>After researching a bit I found this open source repository <a href="https://github.com/torusresearch/solana-embed" rel="noopener noreferrer">torus solana embed</a> it uses a popup window to open their wallet in the window and take input from user if the user wants to approve or reject the request made by dapp client and now my question was how the wallet communicates with the dapp if user approved or rejected? then I found out about window.postMessage(). Parent window and window popups and iframes can communicate in real time using postMessage() method.</p> <p>First i tried to implement iframe method then found out google login from iframe is not possible then implemented window popup and it worked. </p> <p>Take a look at the live working example of how dapps can connect to my wallet <a href="https://example-nextjs-dallet-connect.vercel.app/" rel="noopener noreferrer">here</a></p> <h3> Thank you Harkirat sir for 100xdevs, web3 cohort and the guidance. </h3> 100xdevs superteam solana