Codex Protocol | Biddable Widget

Usage

const widget = new InstantDepositWidget({
  // CSS options that let you control the look & feel of the widget.
  // Each one is optional.
  brandingCssOptions: {
    // Defines the accent color (default: #D43E85)
    brandColor: '#0097BA',

    // Defines the button color (default: #D43E85)
    // Inherits brandColor if not defined
    buttonColor: '#0097BA',

    // Defines the button color when disabled (default: ##CCCCCC)
    // Inherits buttonColor if not defined
    buttonColorDisabled: '#CCCCCC',

    // Defines the button border radius (default: 4px)
    buttonBorderRadius: '2px',

    // Defines the body font-family (default: '\'Open Sans\', sans-serif')
    bodyFontFamily: 'Helvetica Neue',

    // Defines the header font-family (default: '\'Open Sans\', sans-serif')
    // Inherits bodyFontFamily if not defined
    headerFontFamily: 'Helvetica Neue',
  },

  // What your platform should be called if referenced in a string
  platformName: 'Platform Name',

  // The language of strings to show in the widget
  language: 'en',

  // The URL of your back-end that will call the Biddable API
  depositUrl: 'http://localhost:3000/test/biddable/deposit',

  // Set this value if you want to override the ETH -> USD conversion done
  //  inside the widget and simply display your own USD value
  forcedUSDValue: null, // e.g. '1000.00'

  // Whether or not this is a global escrow in your back-end. From the widget
  //  perspective, this just changes the strings displayed to the user.
  isGlobalApproval: true,

  // if MetaMask detects that the user has their network set to anything
  //  other than this network id, the widget will show an error asking the
  //  user to change to this expected network
  //
  // list of network ids:
  //   1 -> Mainnet
  //   2 -> Morden
  //   3 -> Ropsten
  //   4 -> Rinkeby
  //   42 -> Kovan
  //   5777 -> Ganache (local development)
  //
  // NOTE: the default is rinkeby (4), so you MUST override this in production
  //  to point to the mainnet (1)
  //
  // NOTE: this must be a string
  expectedNetworkId: '4',

  // The URL the last screen of the widget should send users to when they click
  //  the "To manage your deposit, visit your <a>Account Settings</a>." link
  //
  // This is optional, and if left unspecified the whole paragraph will be
  //  hidden.
  accountSettingsUrl: '#',

  // POST data to send to depositUrl
  data: {},

  // Callback function that gets executed upon the submission of a transaction with MetaMask
  callback: function (error, result) {
    if (error) console.log(error)
    else console.log('transaction hash is: ' + result.txHash)
  },
})

Changelog

• 0.1.1

  • fixed and improved web3 account detection after user accepts MetaMask permissions
  • fixed stupidly-large rocket icon in Firefox

• 0.1.0

  • updated widget to use ethereum.enable() for MetaMask permissions

• 0.0.14

  • changed ETH-TO-USD api call from now-obsolete CoinMarketCap to probably-obsolete-at-some-point CryptoCompare

• 0.0.13

  • updated URLs on the deposit page

• 0.0.12

  • fixed the ETH price at 5 digits

• 0.0.11

  • added a loading spinner that appears after the "find out more" button is clicked to visually indicate that a (potentially) long API call is happening
  • added buttonColorDisabled option to allow styling of disabled buttons

• 0.0.10

  • added expectedNetworkId option to enforce specific networks required for a given environment - staging should set this to '4', while production MUST set this to '1'

• 0.0.9

  • added better MetaMask handling (error states if it's disabled/locked/wrong network)
  • added the isGlobalApproval flag for platforms using escrow as a global switch instead of a per auction switch
  • added better error handling when calls to the API fail

• 0.0.8

  • fixed a bug that caused the popup to appear in the middle of the body's content instead of in the middle of the viewport

• 0.0.7

  • added forcedUSDValue option to allow optional overriding the ETH -> USD conversion performed by the widget

• 0.0.6

  • fixed a bug that caused styles to bleed onto hosting page

• 0.0.5

  • added style tweaks and made widget responsive
  • added accountSettingsUrl option (see above)
  • added "Use an External Wallet" button flow in place of "Click to see full transaction details" text link

• 0.0.4

  • added "Usage" section to README
  • removed minification from npm build since the intent for using the npm package is to have it bundled on the platform side anyway

• 0.0.3

  • fixed a bug that prevented gradients from being used as a button color (e.g. { buttonColor: 'linear-gradient(pink 0%, red 100%)' })
  • updated 0.0.2 changelog with some clarifications to brandingCssOptions:
    • all options are now listed (initially forgot to include buttonColor and headerFontFamily)
    • defaults are also now listed

• 0.0.2

  • redesigned deposit flow to be simpler
  • in widget options:
    • removed the links option
    • renamed brandName to platformName
    • introduced cobranding variables:

      brandingCssOptions: {
        brandColor: '#0097BA', // default: '#D43E85'
        buttonColor: '#0097BA', // default: brandColor
        buttonBorderRadius: '2px', // default: '4px'
        bodyFontFamily: 'Helvetica Neue', // default: '\'Open Sans\', sans-serif'
        headerFontFamily: 'Helvetica Neue',// default: '\'Open Sans\', sans-serif'
      }

• 0.0.1

  • initial release

Development

For local development, follow these steps:

1. Make sure the biddable back-end service is running so that the depositUrl defined in index.html exists
2. npm start

Now, when you make changes it will refresh the page and the changes will be shown immediately.