Agoric web-wallet integration

[carlos-kryha]

I've been attempting to connect Agoric's web wallet to a react app and I'd like to have a better understanding of the steps and components involved. I understand it could be a lot to document properly, but would be great if we could capture some helpful links, examples, and other practical information around this topic here while we wait for official documentation. Here are the main topics I want to learn more about:

1. What are the pre-requisites for a working connection between a web-app and a web-wallet running on the same machine? (for exampole configuring https://local.agoric.com/, or having a certain sdk version)
2. How is the connection between a web-app and the Agoric web-wallet established? (code-wise, from the web-app)
3. How to read information from the web-wallet? (purses, offers)
4. How to send offers to the web-wallet from a web-app?

I've been using dapp-psm as the main example to learn about the integration, not sure if dapp-inter or any other dapps would be preferable or more up to date?

Any and all comments, tips, examples, or other resources are welcomed, thanks in advance

[samsiegart]

The dapp renders the DappWalletBridge component from @agoric/web-components. That component serves an iframe with the location of bridgeUrl (e.g. https://wallet.agoric.app/wallet/bridge.html, or whatever the dapp specifies). That iframe can then communicate with both the dapp through window.postMessage , and the wallet UI through local storage (since bridgeUrl is meant to be the same origin as your desired wallet UI), hence bridging the dapp and wallet ui together.

dapp-psm is still a good example to follow, and works pretty much the same as dapp-inter. You can see requestDappConnection in the file I linked above. That's what prompts the wallet UI to present the dapp approval modal. Once approved, the dapp can send offers to the wallet UI with addOffer. You can find some examples in dapp-inter and dapp-psm of how those offers should be structured.

The dapp doesn't actually read anything from the wallet bridge, other than isDappApproved. To read the purses and offers etc. of the user, it uses the makeAgoricKeplrConnection library to connect directly to keplr, get the address, and read all that info from the chain, see: https://github.com/Agoric/dapp-psm/blob/main/src/components/ChainConnection.tsx (essentially it does what agd query vstorage data published.wallet.ag123... does). Although, it probably makes sense to not require the dapp to connect to keplr directly and just have DappWalletBridge tell the dapp what the user's address is after it connects. Maybe a future improvement to make.

And also, this stuff only works with smart-wallet-enabled dapps, such as psm and vaults. It's not compatible with ag-solo, it just requires a chromium browser, keplr, and an rpc node to connect to.

It's definitely still a work in progress, and we're exploring ways to remove the need for two different sites.

[samsiegart]

it probably makes sense to not require the dapp to connect to keplr directly and just have DappWalletBridge tell the dapp what the user's address is after it connects

I just recalled why we didn't make it work this way. We didn't want to require the user to have the wallet ui opened and connected to the same network before being able to access the dapp. It was just much simpler to implement with the dapp providing the address on its own.