Render Modes

By default, Gasbot renders as a rounded icon button, however, there are other render modes which can be configured using the renderMode prop.

icon

This is the default value. In this mode, Gasbot will appear as a rounded icon-button with the gas-station icon. This icon serves as a trigger for the Gasbot modal.

floating-icon

In this mode, Gasbot will appear just as above but this time, the icon-button will float on the page bottom right. A react portal is utilised for the floating icon button so the parent page maintains it's original content and layout.

export const YourApp = () => {
  return (
    <Flexy
      /* other props */
      renderMode="floating-icon"
    />
  )
};

component

In this mode, the Gasbot interface renders directly on the page completely skipping the button trigger + modal setup. This is useful if you're trying to setup a dedicated refuel page just like gasbot.xyz/refuel

export const YourApp = () => {
  return (
    <Flexy
      /* other props */
      renderMode="component"
    />
  )
};

iframe

In this mode, the refuel widget will show up as a fullscreen iframe independent of your dApp and with a separate web3 connection. This comes in handy if you do not wish to share your user's wallet client or signer with Gasbot.

export const YourApp = () => {
  return (
    <Flexy
      /* other props */
      renderMode="iframe"
    />
  )
};