The previous Drizzle unboxing initiated a Truffle workspace along with a ReactJs project located under the src/ folder. Here are the steps to follow in order to adapt this example to our needs.

First, copy the tontine.sol file into the contracts/ folder and remove the other existing contracts, except for Migration.sol and tontine.sol.

Then edit the 2_deploy_contract file (as we did in the "truffle quick start" and "Truffle unit tests" section), and substitute the existing deployment script with the following:

var Ctontine = artifacts.require("Ctontine");
var Cplayer = artifacts.require("Cplayer");

deployer.deploy(Cplayer).then(function() {
    return deployer.deploy(Ctontine, Cplayer.address);
}).then(function() { })

Next, edit drizzleOptions.js, which is located under the src/ folder, as follows:

import Cplayer from './../build/contracts/Cplayer.json'
import Ctontine from './../build/contracts/Ctontine.json'

const drizzleOptions = {
    web3: { 
        block: false,
        fallback: { 
            type: 'ws', 
            url: 'ws://127.0.0.1:7545'
        }
    },
    contracts: [ Cplayer, Ctontine ],
    events: { 
        Ctontine: [
           'NewActivePlayerEv', 
           'EliminatedPlayerEv'
        ],
    },
    polls: { accounts: 1500 }
}

export default drizzleOptions;

Here, we define a drizzleOptions object with the following parameters:

• The fallback attribute indicates the URL to use for the web3 connection if no web3 provider, such as MetaMask, is available.
• contracts represents an array of the contract artifacts to interact with.
• In the events option, we set an object consisting of contract names, along an array of the event names we would like to listen for. Furthermore, event names may be replaced with an object containing both eventName and eventOptions, where the eventOptions field defines an event filter. For example, to listen for the eliminatedPlayerEv event from block 0 to the latest we use { eventName: 'eliminatedPlayerEv', eventOptions: { fromBlock: 0 } }
• Finally, polls indicates how often Drizzle will ping the blockchain to synchronize changes in state. polls is set in milliseconds (by default, 3000). In our case, Drizzle will poll every 1.5 seconds.

Once you are done with the drizzleoptions.js editing, move to the src/layout/home directory.