merkuriospam / ships-log

An example dapp listing recent auctions and bids on OpenSea, with the ability to buy items or accept offers right from the page.

The OpenSea Ship's Log

A page listing recent auctions and bids on OpenSea, with the ability to buy items on sale right from the page.

Demo

Check out a live version of this example here.

Instructions

Execute nvm use, if you have Node Version Manager, or install Node.js version 8.11 to make sure dependencies work.

Then, to install dependencies:

npm install

To run the app on localhost:

npm start

To minify and create a production build:

npm run build

The Code

This dapp is very simple. Here's the logic for fetching assets with orders:

async fetchData() {
  const { orders, count } = await this.props.seaport.api.getOrders({
    side: this.state.side
    // Other possible query options, with more to come:
    // 'asset_contract_address'
    // 'maker'
    // 'taker'
    // 'owner'
    // 'token_id'
    // 'token_ids'
    // 'sale_kind'
  }, this.state.page)

  this.setState({ orders, total: count })
}

And here's the one-line call for buying an asset:

await this.props.seaport.fulfillOrder({ order: this.props.order, accountAddress })

If you have any questions, drop us a note any time in Discord in the #developers channel!

Deploying to Heroku

The create-react-app buildpack has issues finding dependencies during the build phase. To work around those, you can do npm run eject and deploy a node app, or you can deploy a pure, static site:

heroku create -b https://github.com/heroku/heroku-buildpack-static.git
npm run build
git push heroku master

Directory structure

public houses favicon and base index.html – there should be little reason to use this directory.

src contains the app's js entry point and a simple CSS file