Sell Out

• 

  Checkout Modal

• 

  Dark Mode

• 

  IPFS Receipt

• 

  NFT Minting Modal

• 

  Component Breakdown

Inspiration

Web3 checkout experiences are often a bad user experience. Sell Out is designed to Web2 checkout experiences to Web3 through RainbowKit like modals.

What it does

Sell Out handles the entire checkout experience for a marketplace or dApp from a single React component and provider.

How we built it

I built a custom RainbowKit modal to work on mobile and web. Once the user information is packed in the SellOutProvider, it is sent to IPFS and hashed. This hash can be used in future requests to verify order data.

Challenges we ran into

Building a component library requires a lot of code to handle edge cases. It was a challenge to quickly produce high quality code while maintaining a great UX in a hackathon.

Accomplishments that we're proud of

I'm proud of how extensible to entire component library is. There are many custom props, and themes for developers to customize to their brand and I am proud of how extensive this tool is.

What we learned

I learned how to deploy a custom NFT contract on Polygon. The checkout experience works well with NFT's. You can call the handleMint() function on the modal to handle the transaction call. Here is the deploy contract: https://mumbai.polygonscan.com/address/0x1888eca0bD881a686aabA79AD61d8a952E157e74

What's next for Sell Out

I would like to add L2 integration, as well as automatic AMM transfers using the Uniswap router. If the vendor accepts one token and the buyer only has another, the swap can be made automatically within the context of the component.

Built With

• hardhat
• ipfs
• nextjs
• polygon
• tailwindcss
• walletconnect