Using OpenSea.js to build a better marketplace
At Mythereum, we built the first playable trading card game on the Ethereum blockchain. We’ve been at it for quite some time, and as with any blockchain game, our users were hungry for an easy way to buy and sell their ERC721 game assets. This left us with an interesting dilemma:
Do we dedicate a ton of resources to building (and maintaining) our own marketplace, or do we partner with someone who’s already building a world-class marketplace as their core product?
We surveyed the field and decided the best thing to do was to partner with OpenSea, the largest marketplace for crypto collectibles. The fact of the matter is that the OpenSea team is absolutely killing it… they’ve built the best marketplace we’ve seen — it’s not even close.
For a while, we were simply directing users to OpenSea as the preferred place to buy and sell their ERC721 Mythereum cards. It worked great. People loved it. But something was still missing: the experience was fragmented.
We were literally kicking people off of our site. Given that dApp adoption is already hard to come by, we knew this strategy wouldn’t work for the long term. We knew it would eventually have to change. But we really, really didn’t want to roll our own version of what we’d already seen done so well. So we kicked the can down the road and waited.
Then one morning while sifting through the avalanche of crypto-related news from the night before, I read that OpenSea had just announced that they’d be releasing OpenSea.js, a javascript interface to their platform. I couldn’t wait to share the news with my team.
We were beyond excited. We dug into the documentation and had a few chats with the OpenSea dev team… and we were floored. It was incredibly well-appointed, providing access to all the features we wanted and a ton more. At that point it was clear: we’d found our path forward.
We spent a few days experimenting with the API and figuring out what exactly it was we were going to build with it before getting started. We decided the things we wanted for sure were:
- Surface all assets that had been listed for sale (fixed-price or auction format)
- Allow our users to list their assets quickly and seamlessly from within Mythereum
- Allow our users to bid on any other user’s assets, whether or not they’d been listed
And so we set sail (heh).
From a technical perspective, the integration leveraged the OpenSeaPort class, which allows the Mythereum website to interact with OpenSea’s orderbooks and smart contracts seamlessly. Giving users the ability to buy and sell just required a few lines of code, with no need to deploy or change anything about our smart contracts.
// Expire this auction one day from now
const expirationTime = (Date.now() / 1000 + 60 * 60 * 24)// Create the auction.
const auction = await seaport.createSellOrder({
tokenId,
tokenAddress,
accountAddress,
startAmount,
endAmount,
expirationTime
})
It didn’t take long before we were able to roll out the first “rough draft” iteration. Our users were thrilled. No more bouncing back and forth between different platforms to buy, sell and trade cards. No more trying to track down the owner of some specific card on our Discord.
One interesting element of the Mythereum marketplace is that there’s unification across both the Mythereum native marketplace and OpenSea’s own marketplace. Because they share the same orderbooks, every time a card is listed on our own site, it’s instantly surfaced on OpenSea and exposed to the OpenSea userbase. That way, all sorts of gamers who may be interested in buying and selling the cards from a pure trading perspective through the OpenSea interface can do so as well.
Of course, there’s always more to be done. We still have a handful of features that need implementing. But the meat of what we were hoping to accomplish is there. We can safely go back to focusing on building out our game experience.
Today, we’re able to provide our users a first-class marketplace experience — and we didn’t have to reinvent the proverbial wheel to do it!
Many thanks to the OpenSea team for all their hard work in making this happen.
