Working of my project wallet adapter for a web based wallet app which is a submission for 100xdev x Superteam hackathon.
Overview of my web based wallet
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.Live, Github
NOTE: Private keys are stored on the server.
Working of my wallet adapter
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 solana walletadapter standard 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.
After researching a bit I found this open source repository torus solana embed 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.
First i tried to implement iframe method then found out google login from iframe is not possible then implemented window popup and it worked.
Take a look at the live working example of how dapps can connect to my wallet here