Initiating Web 3.0 transactions from Oracle Digital Assistant

Welcome to the Web 3.0 world! I believe we all know the basics of cryptocurrency and blockchain technology. The Ethereum is most used public blockchain in the Web 3.0 world. In 2022 we have seen many Enterprises launching NFTs using Public blockchains (i.e. Ethereum, Polygon). There may be a requirement to connect with the Web 3.0 world from the enterprises existing ecosystem. This blog focuses on connecting Crypto wallets using ODA and showcases simple money transfers. This is the initial step in connecting with the Web 3.0 world.

Wallet

Web 3.0 is built on a foundation of cryptocurrencies and decentralized applications (Dapps). The wallet is used to interact with decentralized applications. MetaMask is one of the leading crypto wallets and serves as one of the main gateways to the world of Web3, decentralized finance (DeFi) and NFTs. It is a browser plugin that serves as a wallet and is installed like any other browser plugin.

You can download the MetaMask browser extension from https://metamask.io/ and set up the wallet using a public blog.

Once the wallet is set up, you can create an account in the Ethereum Goerli test network. The account is pair of a private key and a public address. The keys are stored in the users’ system, not on the MetaMask server but MetaMask uses a private key to sign the transaction before publishing it to Ethereum Blockchain.

You can get some test ETH from Goerli Faucet by entering your public address to initiate blockchain transactions on the Ethereum ecosystem.

Fig. 1. MetaMask Wallet

The Use Case

The use case showcases the interaction with the Web 3.0 ecosystem from Oracle Digital Assistant. The ODA is embedded in the VBCS screen. The MetaMask is a browser plugin, ODA can’t directly interact with the browser so all the interactions are passed through ODA Web SDK in the VBCS screen. Please refer to Abhay’s blog to embed Oracle Digital Assistant in VBCS application.

1. ODA displays the welcome message and prompts user to connect to the MetaMask wallet.
2. The user clicks on connect Wallet and the request gets transferred to Web SDK which opens the MetaMask browser plugin prompting the user to connect to an account. The user chooses the account from the list and ODA shows the connected account address.
3. The user initiates transactions from ODA for example sending money to a colleague, the Web SDK transfers the request to MetaMask to sign the transactions.
4. All the transactions which cost Ethereum Gas require user consent, these transactions are signed with a Private Key (stored on the user’s machine) in MetaMask.
5. MetaMask publishes the transaction to the Ethereum blockchain via third-party provider Infura which runs the Ethereum Node.
6. Users can check the transaction status on Ethereum blockchain explorer.

Fig. 2. Use Case: Web3 Transactions From ODA

The Solution

The screenshots below highlight the steps involved in connecting the MetaMask wallet and initiating a money transfer using ODA. This blog shows the basic money transfer flow by taking user consent, the same solution can be used to interact with Smart Contracts on a public blockchain.

Fig. 3. ODA : Connect Wallet

Fig. 4. ODA: Send Money Transaction

The transaction status can be checked on Goreli Testnet Explorer, You can find the transaction created during the recording of the demo on the below link.

https://goerli.etherscan.io/tx/0xee70fdf209d7daf95aaf45e8b7002ffe7e8bdae67eaf1aa0e8d0a0f52b172423

Oracle Digital Assistant Web 3.0 Skill

The ODA Web 3.0 skill has one intent "Send Money" in use for this demo and one composite bag "TransferMoney" which has 2 bag items "Amount" and "ToAddress", the key attributes for sending the money. The from address is derived once a user connects the account in MetaMask wallet.

Fig. 5. ODA: Composite Bag Entities

The Web 3.0 skill has the following Dialog Flow which has 6 states. The welcome state shows the welcome message to the user, the wallet address state shows the connected account address, send money state has "TrasferMoney" composite bag which captures the amount and "to address" from the user’s input and the check status state takes the user to transaction on Goreli Testnet Explorer.

Fig. 6. ODA: Visual Dialog Flow

Connect Wallet: It has a common response component which has custom properties for the Web SDK channel, the component passes the operation type: wallet property and wallet address variable to Web SDK which returns the account address from MetaMask wallet. The metadata for CRC component is shown below.

responseItems:
  - text: "To Start with Web 3.0 transactions, please connect to your MetaMask Wallet."
    type: text
    channelCustomProperties:
      - channel: websdk
        properties:
          uiComponent:
            type: wallet
            properties:
              variable: walletaddress

Sign Transaction: It has a common response component which has custom properties for the Web SDK channel, the component passes the operation type: "signtransaction" property along with from address, to address and amount and transaction hash variable to Web SDK which returns the Hash of transaction created on Goreli Testnet blockchain. The metadata for CRC component is shown below.

responseItems:
  - text: "Sending ${TransferMoney.value.Amount.number} ETH To ${TransferMoney.value.ToAddress.originalString} through MetaMask wallet, please sign the transaction."
    type: text
    channelCustomProperties:
      - channel: websdk
        properties:
          uiComponent:
            FromAddress: "${walletaddress.value}"
            Amount: "${TransferMoney.value.Amount.number}"
            type: signtransaction
            ToAddress: "${TransferMoney.value.ToAddress.value}"
            properties:
              variable: transactionHash

ODA Web SDK in VBCS Application

The Web SDK JavaScript API is embedded into VBCS application and all the user’s Web 3.0 interactions go through the SDK’s Delegate function. Web SDK JavaScript API is used to connect the MetaMask wallet & Sign the "send money" transaction and return it back to the skill to update the underlying variables (wallet address, transaction hash). The solution in this article works for the Oracle Web SDK channel. It does not work for other channels. The ethers.js library is added to the VBCS app, it is a compact library for interacting with the Ethereum Blockchain and its ecosystem. The ethers.js can be downloaded from this link.

Fig. 7. ODA: Web SDK & Ethers.JS Libraries

MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users' Ethereum accounts, read data from blockchains the user is connected to, and suggest that the user sign messages and transactions.

Connect Wallet: MetaMask uses ethereum.request(args) method to wrap an API calls. The connect wallet action calls eth_requestAccounts method on Ethereum API, this request causes a MetaMask popup to appear. It prompts the user to select the account to initiate the Web 3.0 transactions in subsequent steps. The selected account address is returned back to ODA in the wallet address variable. The code for connecting the wallet is shown below.

Sign Transaction: The sign transaction action calls eth_sendTransaction method on Ethereum API, it creates Ethereum transaction to send money in this demo and the same method can be used to interact with smart contract functions. This request also causes a MetaMask popup to appear. It prompts the user to sign the transaction to be created on the Ethereum blockchain. The transaction hash which uniquely identifies the transaction on the blockchain is returned back to ODA in the transaction hash variable. The code for signing the transaction is shown below.

var delegate = {
 beforeDisplay: function (message) {
 //Customisations to show uiComponents
 if (message.messagePayload && message.messagePayload.channelExtensions && message.messagePayload.channelExtensions.uiComponent)    {
  const uiComponent = message.messagePayload.channelExtensions.uiComponent;
  //upon receiving uiComponent: calendar add a calendar

  if (uiComponent.type == 'wallet') {
   var variable = '';
   if (uiComponent.properties) {
    const properties = uiComponent.properties;
    variable = properties.variable;
   }

   message.messagePayload.text = `${message.messagePayload.text || ''}<div>
   <div dir="auto" class="oda-chat-message-actions"><button id=\"idButton1\" dir="auto" type="button" title="Submit" class="oda-chat-action-postback" onclick=\"{ const { ethereum } = window; ethereum.request({ method: 'eth_requestAccounts' }).then((accounts)=>{console.log(JSON.stringify(accounts)); Bots.sendMessage({ 'messagePayload' :{ 'postback': { 'variables': { ${variable}: accounts[0] }, 'action': 'connectWallet' }, 'text': 'Connect Wallet', 'type': 'postback' }}, {hidden: true }); }); } \"><div dir="auto">Connect Wallet</div></button></div>
  </div>`;
}

if (uiComponent.type == 'signtransaction') {
 var variable = '';
 if (uiComponent.properties) {
  const properties = uiComponent.properties;
  variable = properties.variable;
 }
 var Amount = uiComponent.Amount;
 var ToAddress = uiComponent.ToAddress;
 var FromAddress = uiComponent.FromAddress;
 message.messagePayload.text = `${message.messagePayload.text || ''}
 <div><div dir="auto" class="oda-chat-message-actions"><button id=\"idButton2\" dir="auto" type="button" title="Submit" class="oda-chat-action-postback" onclick=\"{ const { ethereum } = window; ethereum.request({method:'eth_sendTransaction',params: [{from:'${FromAddress}',to: '${ToAddress}', gas: '0x5208',value: ethers.utils.parseEther('${Amount}')._hex}]}).then((transaction)=>{console.log(JSON.stringify(transaction)); Bots.sendMessage({ 'messagePayload' :{ 'postback': { 'variables': { ${variable}: transaction }, 'action': 'signTransaction' }, 'text': 'Sign Transaction', 'type': 'postback' }}, {hidden: true }); }); } \"><div dir="auto">Sign Transaction</div></button></div>
 </div>`;
 }
 }
 //Return the message (in it's new form)
 return message;
 }
};

Conclusion

The blog explains connecting to MetaMask wallet from ODA and performing Web 3.0 transactions from Oracle Digital Assistant with the help of Web SDK. These Web 3.0 transactions require user consent before getting created on a public blockchain, it is achieved through MetaMask wallet. This is the first step in connecting the enterprise ecosystem with the Web 3.0 world.