3B. RenJS

Part 3 of 3 - low level option
This section goes through the same instructions as the previous section, replacing GatewayJS with RenJS. The interface is similar, so they can easily be interchanged.
Initializing RenJS
Install RenJS using npm:
$ npm install --save @renproject/ren
Import it at the top of your file with:
src/App.js
import RenJS from "@renproject/ren";
Initialize it and add it to your App.js state (line 17, after message: "",) like so:
renJS: new RenJS("testnet"),
We initialize it using the network "testnet". This will tell it to talk to RenVM Testnet and to use Ethereum Kovan.
Depositing funds
We are now ready to call the deposit function.
First, we need to create a ShiftIn object. RenJS will use this ShiftIn object to understand exactly how we want to shift our BTC into Ethereum. Add this to the body of deposit:
const { web3, renJS } = this.state;
const amount = 0.001; // BTC
​
const shiftIn = renJS.shiftIn({
    // Send BTC from the Bitcoin blockchain to the Ethereum blockchain.
    sendToken: RenJS.Tokens.BTC.Btc2Eth,
​
    // The contract we want to interact with
    sendTo: contractAddress,
​
    // The name of the function we want to call
    contractFn: "deposit",
    
    nonce: renJS.utils.randomNonce(),
​
    // Arguments expected for calling `deposit`
    contractParams: [
        {
            name: "_msg",
            type: "bytes",
            value: web3.utils.fromAscii(`Depositing ${amount} BTC`),
        }
    ],
});
We tell it what asset we are shifting and give it the details it needs to talk to our Ethereum contract.
Notice that we don't provide an amount - it will accept the first deposit sent to it. If you require a specific amount, you can include: requiredAmount: Math.floor(amount * (10 ** 8)). The downside is that if the user sends an incorrect amount, RenJS will currently ignore the deposit.
Next, we want to generate a gateway address. This is generated uniquely from the details we provided to the ShiftIn object. We show the gateway address to the user and then wait for them to send BTC to this address.
// Show the gateway address to the user so that they can transfer their BTC to it.
const gatewayAddress = shiftIn.addr();
this.log(`Deposit ${amount} BTC to ${gatewayAddress}`);
​
// Wait for the Darknodes to detect the BTC transfer.
const confirmations = 0;
const deposit = await shiftIn.waitForDeposit(confirmations);
After we have received the BTC deposit, we need to let RenVM know about it. RenVM will check the gateway address and return a signature that authorizes us to shift the BTC into Ethereum.
// Retrieve signature from RenVM.
this.log("Submitting to RenVM...");
const signature = await deposit.submitToRenVM();
Once we have the signature, we need to pass it to our Basic contract:
// Submit the signature to Ethereum and receive zBTC.
this.log("Submitting to smart contract...");
await signature.submitToEthereum(web3.currentProvider);
this.log(`Deposited ${amount} BTC.`);
Withdrawing funds
When shifting BTC out of Ethereum back to the Bitcoin blockchain, we need to burn the zBTC tokens. RenVM will automatically see this and release the BTC. We use a regular Web3 contract call to do this first step. Add this to withdraw:
const { web3, renJS, balance } = this.state;
​
const amount = balance;
const recipient = prompt("Enter BTC recipient:");
const from = (await web3.eth.getAccounts())[0];
const contract = new web3.eth.Contract(ABI, contractAddress);
​
this.log("Calling `withdraw` on smart contract...");
const txHash = await new Promise((resolve, reject) => {
    contract.methods.withdraw(
        web3.utils.fromAscii(`Withdrawing ${amount} BTC`), // _msg
        RenJS.utils.btc.addressToHex(recipient), //_to
        Math.floor(amount * (10 ** 8)), // _amount in Satoshis
    ).send({ from })
        .on("transactionHash", resolve)
        .catch(reject);
});
Once we have the transaction hash of the contract call, we can ask RenVM about the status of the shift. They will return back the final amount and address that received the BTC.
this.log(`Retrieving burn event from contract...`);
const shiftOut = await renJS.shiftOut({
    // Send BTC from the Ethereum blockchain to the Bitcoin blockchain.
    // This is the reverse of shitIn.
    sendToken: RenJS.Tokens.BTC.Eth2Btc,
​
    // The web3 provider to talk to Ethereum
    web3Provider: web3.currentProvider,
​
    // The transaction hash of our contract call
    txHash,
}).readFromEthereum();
​
this.log(`Submitting to Darknodes...`);
await shiftOut.submitToRenVM();
this.log(`Withdrew ${amount} BTC to ${recipient}.`);
Complete App.js
Your App.js file should now look like this (don't forget to replace the contract address):
src/App.js
import React from 'react';
import RenJS from "@renproject/ren";
import Web3 from "web3";
import './App.css';
​
import ABI from "./ABI.json";
​
// Replace with your contract's address.
const contractAddress = "0xb2731C04610C10f2eB6A26ad14E607d44309FC10";
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 0,
      message: "",
      error: "",
      renJS: new RenJS("testnet"),
    }
  }
​
  componentDidMount = async () => {
    let web3Provider;
​
    // Initialize web3 (https://medium.com/coinmonks/web3-js-ethereum-javascript-api-72f7b22e2f0a)
    // Modern dApp browsers...
    if (window.ethereum) {
      web3Provider = window.ethereum;
      try {
        // Request account access
        await window.ethereum.enable();
      } catch (error) {
        // User denied account access...
        this.logError("Please allow access to your Web3 wallet.");
        return;
      }
    }
    // Legacy dApp browsers...
    else if (window.web3) {
      web3Provider = window.web3.currentProvider;
    }
    // If no injected web3 instance is detected, fall back to Ganache
    else {
      this.logError("Please install MetaMask!");
      return;
    }
​
    const web3 = new Web3(web3Provider);
​
    const networkID = await web3.eth.net.getId();
    if (networkID !== 42) {
      this.logError("Please set your network to Kovan.");
      return;
    }
​
    this.setState({ web3 }, () => {
​
      // Update balances immediately and every 10 seconds
      this.updateBalance();
      setInterval(() => {
        this.updateBalance();
      }, 10 * 1000);
    });
  }
​
  render = () => {
    const { balance, message, error } = this.state;
    return (
      <div className="App">
        <p>Balance: {balance} BTC</p>
        <p><button onClick={() => this.deposit().catch(this.logError)}>Deposit 0.001 BTC</button></p>
        <p><button onClick={() => this.withdraw().catch(this.logError)}>Withdraw {balance} BTC</button></p>
        <p>{message}</p>
        {error ? <p style={{ color: "red" }}>{error}</p> : null}
      </div>
    );
  }
​
  updateBalance = async () => {
    const { web3 } = this.state;
    const contract = new web3.eth.Contract(ABI, contractAddress);
    const balance = await contract.methods.balance().call();
    this.setState({ balance: parseInt(balance.toString()) / 10 ** 8 });
  }
​
  logError = (error) => {
    console.error(error);
    this.setState({ error: String((error || {}).message || error) });
  }
​
  log = (message) => {
    this.setState({ message });
  }
​
  deposit = async () => {
    this.logError(""); // Reset error
​
    const { web3, renJS } = this.state;
    const amount = 0.001; // BTC
​
    const shiftIn = renJS.shiftIn({
      // Send BTC from the Bitcoin blockchain to the Ethereum blockchain.
      sendToken: RenJS.Tokens.BTC.Btc2Eth,
​
      // The contract we want to interact with
      sendTo: contractAddress,
​
      // The name of the function we want to call
      contractFn: "deposit",
      
      nonce: renJS.utils.randomNonce(),
​
      // Arguments expected for calling `deposit`
      contractParams: [
        {
          name: "_msg",
          type: "bytes",
          value: web3.utils.fromAscii(`Depositing ${amount} BTC`),
        }
      ],
    });
​
    // Show the gateway address to the user so that they can transfer their BTC to it.
    const gatewayAddress = shiftIn.addr();
    this.log(`Deposit ${amount} BTC to ${gatewayAddress}`);
​
    // Wait for the Darknodes to detect the BTC transfer.
    const confirmations = 0;
    const deposit = await shiftIn.waitForDeposit(confirmations);
​
    // Retrieve signature from RenVM.
    this.log("Submitting to RenVM...");
    const signature = await deposit.submitToRenVM();
​
    // Submit the signature to Ethereum and receive zBTC.
    this.log("Submitting to smart contract...");
    await signature.submitToEthereum(web3.currentProvider);
    this.log(`Deposited ${amount} BTC.`);
  }
​
  withdraw = async () => {
    this.logError(""); // Reset error
​
    const { web3, renJS, balance } = this.state;
​
    const amount = balance;
    const recipient = prompt("Enter BTC recipient:");
    const from = (await web3.eth.getAccounts())[0];
    const contract = new web3.eth.Contract(ABI, contractAddress);
​
    this.log("Calling `withdraw` on smart contract...");
    const txHash = await new Promise((resolve, reject) => {
      contract.methods.withdraw(
        web3.utils.fromAscii(`Depositing ${amount} BTC`), // _msg
        RenJS.utils.btc.addressToHex(recipient), //_to
        Math.floor(amount * (10 ** 8)), // _amount in Satoshis
      ).send({ from })
        .on("transactionHash", resolve)
        .catch(reject);
    });
​
    this.log(`Retrieving burn event from contract...`);
    const shiftOut = await renJS.shiftOut({
      // Send BTC from the Ethereum blockchain to the Bitcoin blockchain.
      // This is the reverse of shitIn.
      sendToken: RenJS.Tokens.BTC.Eth2Btc,
​
      // The web3 provider to talk to Ethereum
      web3Provider: web3.currentProvider,
​
      // The transaction hash of our contract call
      txHash,
    }).readFromEthereum();
​
    this.log(`Submitting to Darknodes...`);
    await shiftOut.submitToRenVM();
    this.log(`Withdrew ${amount} BTC to ${recipient}.`);
  }
}
​
export default App;
Testing it
If you click "Deposit 0.001 BTC", it should show you a Bitcoin address:
An example of our new multi-blockchain dApp
If you don't already have Testnet BTC, you'll need to go to a Bitcoin Testnet faucet (we recommend https://testnet-faucet.mempool.co).
Send 0.001 BTC to the Bitcoin gateway address to continue.
RenVM will currently only see the first transaction to the gateway address. It must be the exact amount shown. Any other funds sent to the gateway address cannot be recovered until the next release of RenVM.
It can take a minute, or two, for RenVM to process the transfer. After completing all the steps, you should see the balance increase. You won't receive the full 0.001 BTC due to transfer fees.
After depositing some BTC into our Ethereum contract
Test withdrawing as well. If you don't have a Testnet BTC address to give it, the faucet lists a return address you can use. You should see the balance go back to 0 and the Bitcoin address you entered receive the BTC (again, some transfer fees will be deducted).
You can find the site deployed here as well: https://renproject.github.io/renjs-tutorial​
3A. GatewayJS
4. Local storage
Last updated 3 weeks ago