var bncAssistConfig = {
  dappId: apiKey, // [String] The API key created on https://account.blocknative.com
 
  networkId: networkId // [Integer] The network ID of the Ethereum network your dapp is deployed on.
  //           See below for instructions on how to setup for local blockchains.
}
 
var assistInstance = assist.init(bncAssistConfig)

assistInstance
  .onboard()
  .then(function(state) {
    // User has been successfully onboarded and is ready to transact
    // Will resolve with the current state of the user
    // This means we can be sure of the following user properties:
    //  - They are using a compatible browser
    //  - They have a web3-enabled wallet installed
    //  - The wallet is connected to the config-specified networkId
    //  - The wallet is unlocked and contains at least `minimumBalance` in wei
    //  - They have connected their wallet to the dapp, congruent with EIP1102
  })
  .catch(function(state) {
    // The user exited onboarding before completion
    // Will let you know what stage of onboarding the user was up to when they exited via the state object
  })

var myContract = new web3.eth.Contract(abi, address)
// Assist can decorate ethers instantiated contracts as well
var myDecoratedContract = assistInstance.Contract(myContract)
 
// and then replace `myContract` with `myDecoratedContract`
// throughout your app
// ...

var myContract = assistInstance.Contract(new web3.eth.Contract(abi, address))

var myContract = assistInstance.Contract(address, abi)

let web3Instance
 
if (window.ethereum) {
  web3Instance = new Web3(window.ethereum)
}
 
if (window.web3) {
  web3Instance = new Web3(window.web3.currentProvider)
}

var config = {
  networkId: Number, // The network id of the Ethereum network your Dapp is working with (REQUIRED)
  dappId: String, // The API key supplied to you by Blocknative (REQUIRED)
  web3: Object, // The instantiated version of web3 that the Dapp is using
  ethers: Object, // Pass in ethers if using instead of web3 (this is required if you are using ethers)
  mobileBlocked: Boolean, // Defines if the Dapp works on mobile [false]
  minimumBalance: String, // Defines the minimum balance in Wei that a user needs to have to use the Dapp [0]
  headlessMode: Boolean, // Turn off Assist UI, but still retain analytics collection [false]
  browserCheck: Boolean, // Check if the user is on a browser that supports extension wallets during onboarding [true]
  messages: {
    // See custom transaction messages section below for more details
    txRequest: Function, // Transaction request has been initiated and is awaiting user approval
    txSent: Function, // Transaction has been sent to the network
    txPending: Function, // Transaction is pending and has been detected in the mempool
    txSendFail: Function, // Transaction failed to be sent to the network
    txUnderpriced: Function, // Transaction gas limit was set too low
    txError: Function, // An unknown MetaMask / JSON RPC error occurred when trying to send the transaction
    txStallPending: Function, // Transaction was sent to the network but has not been detected in the txPool
    txStallConfirmed: Function, // Transaction has been detected in the mempool but hasn't been confirmed
    txFailed: Function, // Transaction failed
    nsfFail: Function, // User doesn't have enough funds to complete transaction
    txRepeat: Function, // Warning to user that they might be repeating a transaction
    txAwaitingApproval: Function, // Warning to the user that they have a previous transaction awaiting approval
    txConfirmReminder: Function, // A warning to the user that their current transaction is still awaiting approval
    txConfirmed: Function, // Transaction is confirmed
    txSpeedUp: Function // The user has re-submitted a transaction with a higher gas price
  },
  images: {
    welcome: {
      src: String, // Image URL for welcome onboard modal
      srcset: String // Image URL(s) for welcome onboard modal
    },
    complete: {
      src: String, // Image URL for complete onboard modal
      srcset: String // Image URL(s) for complete onboard modal
    }
  },
  style: {
    darkMode: Boolean, // Set Assist UI to dark mode
    notificationsPosition: Object || String, // Defines where in the viewport notifications will be positioned. See below: 'Notification Positioning'
    css: String // Custom css string to overide Assist default styles
  },
  handleNotificationEvent: Function // Called on every tx notification event with a transaction event object
  timeouts: {
    txStallPending: Number // The number of milliseconds after a transaction has been sent before showing a stall notification detected in the mempool
    txStallConfirmed: Number // The number of milliseconds after a transaction has been detected in the mempool before showing a stall notification if not confirmed
  },
  recommendedWallets: {
    desktop: Array, // Array of Objects that define wallets this dapp supports on desktop to users that don't have a wallet
    mobile: Array // Array of Objects that define wallets this dapp supports on mobile to users that don't have a wallet
  }
}

// Set notifications to bottom on mobile and top right on desktop
var config = {
  style: {
    notificationsPosition: {
      desktop: 'topLeft',
      mobile: 'bottom'
    }
  }
}

// Sets only the desktop position
var config = {
  style: {
    notificationsPosition: 'bottomRight'
  }
}

{
  categoryCode: String, // event category - List detailed below
  eventCode: String, // event type - List detailed below
  contract: { // if not a contract method transaction, then this is undefined
    methodName: String, // name of the method that was called
    parameters: Array, // the parameters the method was called with
  },
  inlineCustomMsgs: Object | Boolean, // the inline custom messages passed to the transaction
  reason: String, // reason for error type notifications
  transaction: {
    id: String, // internal unique id for the transaction (remains constant even if transaction hash changes due to speedup or cancel)
    from: String, // the address the transaction was sent from
    gas: String, // the gas limit of the transaction
    gasPrice: String, // the gas price of the transaction
    to: String, // the address the transaction was sent to
    value: String // the value of the transaction
    hash: String // the transaction hash (updated to a new hash if transaction is sped up or cancelled)
    originalHash: String, // if transaction was sped up or cancelled, the original transaction hash
    receipt: Object || undefined // Will be an object on a txConfirmedClient event. Is the receipt object that is received from web3 or ethers
  },
  wallet: {
    address: String, // the account address of the wallet in use
    balance: String, // the balance in wei of the wallet in use
    minimum: Boolean, // whether the wallet has the minimum balance required (specified in config)
    provider: String // the name of the wallet provider
  }
}

txConfirmedClient: String // called when a client confirmation is received from the provider

  activePreflight: String, // called during preflight transaction checks
  activeTransaction: String, // called during an active non-contract transaction
  activeContract: String // called during an active contract transaction

{
  transaction: {
    to: String, // The address the transaction is going to
    gas: String, // Gas (wei)
    gasPrice: String, // Gas price (wei)
    hash: String, // The transaction hash
    nonce: Number, // The transaction nonce
    value: String, // The value of the transaction (wei)
    receipt: Object || undefined // Will be an object on txConfirmedClient event
  },
  contract: {
    // This object will be undefined if it is not a contract transaction
    methodName: String, // The name of the method that was called
    parameters: Array // The parameters that the method was called with
  }
}

var config = {
  //...
  messages: {
    txSent: function(data) {
      return 'Your transaction has been sent to the network'
    },
    txConfirmed: function(data) {
      if (data.contract.methodName === 'contribute') {
        return 'Congratulations! You are now a contributor to the campaign'
      }
    }
    // ....
  }
}

// 0.2 style send
myContract.vote(param1, param2, options, callback, {
  messages: { txPending: () => `Voting for ${param1} in progress` }
})
 
// 1.0 style send
myContract.vote(param1, param2).send(options, {
  messages: { txPending: () => `Voting for ${param1} in progress` }
})
 
// Transaction
Transaction(txObject, callback, {
  messages: { txPending: () => 'Sending ETH...' }
})

myContract.vote(param1, param2, options, callback, {
  messages: { txPending: () => `Voting for ${param1} in progress` },
  clickHandlers: {
    txPending: () => route('./votes'), // can specify a click handler for specific event codes which takes precedence
    onclick: () => console.log('this is the global click handler') // or you can specify a onclick function which will run for every event for this transaction that doesn't have a click handler specified
  }
})

{
  categoryCode: "activeTransaction"
  contract: Object { methodName: "highFive", parameters: (1) […] }
  eventCode: "txPending"
  inlineCustomMsgs: false
  transaction: Object { id: "f64a4c67-f349-4da7-8d6b-55e92525e60b", gas: "24268", gasPrice: "1000000000", … }
}

state = {
  mobileDevice: Boolean, // User is on a mobile device
  validBrowser: Boolean, // User is on a valid web3 browser
  currentProvider: String, // Current provider being used to connect to the network
  web3Wallet: Boolean, // User has a web3Wallet installed
  accessToAccounts: Boolean, // Dapp has access to accounts
  walletLoggedIn: Boolean, // User is logged in to wallet
  walletEnabled: Boolean, // User has enabled EIP 1102 compliant wallet
  accountAddress: String, // Address of the user's selected account
  accountBalance: String, // User account balance
  minimumBalance: String, // User has the minimum balance specified in the config
  userCurrentNetworkId: Number, // Network id of the network the user is currently on
  correctNetwork: Boolean // User is on the network specified in the config
}

{
  eventCode: 'initFail',
  message: 'An API key is required to run Assist'
}

{
  recommendedWallets: {
    desktop: [
      {
        name: 'MetaMask',
        link: 'https://metamask.io/',
        icon: 'https://metamask.io/img/metamask.png'
      }
      // other desktop wallets your dapp supports here
    ],
    mobile: [
      {
        name: 'Coinbase',
        link: 'https://wallet.coinbase.com/',
        icon: 'https://cdn-images-1.medium.com/max/1200/1*7ywNS48PnonfsvvMu1tTsA.png'
      }
      // other mobile wallets your dapp supports here
    ]
  }
}

var assistInstance = assist.init(assistConfig)

assistInstance
  .onboard()
  .then(function(state) {
    // User has been successfully onboarded and is ready to transact
  })
  .catch(function(state) {
    // The user exited onboarding before completion
  })

// web3
var myContract = new web3.eth.Contract(abi, address)
var myDecoratedContract = assistInstance.Contract(myContract)
mydecoratedContract.methods.myMethod(params).call()
 
// OR
 
// ethers
var myContract = assistInstance.Contract(address, abi)
myContract.myMethod().call()

const notificationOptions = {
  messages: {
    txPending: () => 'your bid is pending...
  },
  clickHandlers: {
    txPending: () => route('./open-bids')
  }
}

assistInstance
  .Transaction(txObject)
  .then(txHash => {
    // Transaction has been sent to the network
  })
  .catch(error => {
    console.log(error.message) // => 'User has insufficient funds'
  })
 
// you can alternatively pass in a transaction hash to get Assist's notifications for a transaction that has already been sent to the network
assistInstance.Transaction(hash)

assistInstance.getState().then(function(state) {
  if (state.validBrowser) {
    console.log('valid browser')
  }
})

var style = {
  darkMode: Boolean, // Set Assist UI to dark mode
  css: String, // Custom css string to overide Assist default styles
  notificationsPosition: String || Object // Defines which corner transaction notifications will be positioned. See 'Notification Positioning'
}

// Enable dark mode and position notifications at the bottom left on desktop
var style = {
  darkMode: true,
  notificationsPosition: 'bottomLeft'
}
assistInstance.updateStyle(style)
 
// Position notifications at the bottom of the viewport on mobile and set their background to black
var style = {
  css: `.bn-notification { background: black }`,
  notificationsPosition: { mobile: 'bottom' }
}
assistInstance.updateStyle(style)

options = {
  customTimeout: Number, // Specify how many ms the notification should exist. Set to -1 for no timeout.
  customCode: String, // An identifier for this notify call
  onclick: Function // Function to run when user clicks notification
}

// Display a success notification with an embedded link for 5000ms
assistInstance.notify(
  'success',
  'Operation was a success! Click <a href="https://example.com" target="_blank">here</a> to view more',
  { customTimeout: 5000 }
)
 
// Display a pending notification, load data from an imaginary backend
// and dismiss the pending notification only when the data is loaded
var dismiss = assistInstance.notify('pending', 'Loading data...', {
  customTimeout: -1
})
myEventEmitter.emit('fetch-data-from-backend')
myEventEmitter.on('data-from-backend-loaded', () => {
  dismiss()
})