Skip to content


In this section, we will build the pages for the frontend application.

App Component

We start with the App component.

We create the routes for our pages using react-router-dom.

We setup the Toaster from react-hot-toast.

With the useEffect hook, we set up the following:

  • We check if ZilPay is available on the browser and store it in context using setZilPay. If ZilPay is not available, an error is conveyed.
  • We fetch the state of the contract and store it in context using setContract
  • Subscriptions are set up which allow us to
  • Update the contract state and block number when there is a block update using zilPay.wallet.observableBlock
  • Update the ZilPay account when it is changed using zilPay.wallet.observableAccount