tl;dr - Supersocks are onchain socks on OP Mainnet with a "choose your adventure" checkout experience.
The idea
As part of the OP Foundation EIP-7702 Mission I wanted to build something fun to showcase the "before and after" UX side by side. I decided to draw on nostalgia from two different eras: designing custom Nike hightops on an early website in my teens, and buying ill-advised onchain NFTs in 2021.
What if you could design and mint socks on the Superchain? Supersocks pretty much named themselves.
The design
Pixels are a pretty popular medium for onchain NFTs (see Basepaint, Chonks), perhaps because pixel art is quite programmable. After playing around with a couple of different styles (long socks, short socks, pairs, single socks) I landed on a pretty chunky single sock base design, with some options for the top, heel and toe, overlaid with a custom pattern.
Tip of the hat to T-shirt Exchange for inspiration, and to ChatGPT and Azimov for the creative collaboration.
The renderer
It was fun to create onchain SVG-based NFTs again after a couple of years. I created a separate Renderer.sol contract for the metadata and visualisation, which also allowed me to leverage w1nt3r's hot-chain-svg library during development. I used yqnn's svg-path-editor to create the styles, which I opted to store as SVG paths in contract storage. I was able to pack all the relevant metadata into the uint256 ID, at the cost of slightly illegible token identifiers. And I left the door open to add additional styles after deployment.
The nft
Having started out with ERC721s, I pivoted to ERC1155s, as I thought it would be fun for people to mint socks designed by others. After spending quite a bit of time looking into a Pooltogether scope-explosion, I decided to keep it simple:
- Users pay 1 USDC to mint socks
- Sock designers get 10% of cost
- Platform gets 20% of cost
- The rest is withdrawable by the user
This is a bit unintuitive - why not just lower the price? But I wanted to encourage folks to try out the different purchase experiences, and (thinking ahead) I knew that there are lower limits on the size of crosschain transactions.
I made some other slightly nuanced adjustments (e.g. allowing for passing in the recipient address, as well as crosschain slippage and specific amount passing), but broadly tried not to optimise too much, as I wanted to explore what is possible without smart contract customisation.
I deployed on Optimism Mainnet, which brought back memories of OE40 in 2021.
The studio
While my socks were pretty simple, the initial UI was an illegible mess of dropdowns. Thankfully I was able to leverage the actual onchain SVG paths to create a more visual experience, while I could validate the design by calling the onchain renderer contract itself (and generally trying to automatically avoid any invalid configurations).
I opted for an Amazon-ish "Add to Basket" / "Buy Now" call-to-action, to mimic the UX that most users are familiar with from buying regular things online.
The checkout
I recreated the classic "Stripe Checkout" layout, with basket contents on the left, and payment information on the right. I wanted my payment options to mirror the "Pay with Paypal" / "Google Pay" options.
I started out with the "Basic" option: the classic ERC20 purchase flow using USDC on Optimism, requiring separate Approve and Mint transactions. This is very much the norm today, and it is one of the primary UX speedbumps that EIP-7702 helps overcome.
With that in place as the baseline, I added a "Batch" flow, which makes a single wallet_sendCalls request with both the approve and mint calls using wagmi's useSendCalls hook, passing the experimental_fallback option in case the wallet doesn't support EIP-5792. The fallback is a little unpredictable, but when it works this one-step experience is clearly simpler for users.
While those options clearly demonstrated what EIP-7702 and EIP-5792 enabled for app developers and users, I wanted to explore other ways to improve the purchase experience. While the Batch purchase UX was nicer, it didn't solve the problem of needing USDC on Optimism. What if you didn't have any?
I first opted to show an "old fashioned" way, creating a custom Swapper.sol contract to swap ETH for USDC on Optimism using Uniswap V4 before making the mint transaction on behalf of the user. This was my first time integrating Uniswap V4 via the Universal Router, so it was cool to get it working end to end (once I worked out I needed to sweep any leftover ETH, given that I was doing an exactOutput swap), with frontend price fetching to provide slippage safety. This option makes for a pretty clean UX, but it obviously required a custom contract, and only works if you have ETH on Optimism.
If you don't have any assets on Optimism, the normal approach is pretty gnarly ("go bridge funds here..."). I recently added optional EIP-5792 support to the Across SDK, so I thought this was a good opportunity to enable one-click cross chain purchases with USDC. This is made possible by the Across crosschain messaging capability, which allows you to specify some contract calls to be made after bridging takes place.
I hit some issues using Across on testnet so ended up testing in production, and was delighted to see my socks being purchased from Unichain! The Across SDK is a bit limited (you can only specify the input amount, rather than the output amount, and it doesn't allow for swaps), but it does significantly reduce the complexity of moving assets across chains for users.
Finally, I got in touch with the nice folks at Daimo, whose SDK offers simple cross-chain payments using an elegant intent-based solution which includes the ability to make custom contract calls. As a payment-focused product I was optimistic that this might be the most streamlined experience yet, and I was not disappointed - with relatively little configuration I was able to buy Supersocks
Notably Daimo's approach is designed so that it doesn't depend on EIP-7702 to enable one-click transactions, which is another illustration of the fact that improved UX is already here, it's just not evenly distributed.
What's next?
These options are only a few of the many ways to take payments on Ethereum today, with Biconomy, Li.fi, Porto and many others offering new and improving solutions. The Supersocks checkout experience is a sandbox, so we can add more and more examples over time.
Notably the examples so far all rely on users to pay for their own transaction costs, and require users to have onchain assets to begin with - usability at scale can't make either of those assumptions.
The crosschain examples also rely primarily on intents, rather than more native interop solutions - these aren't currently live, but upcoming Upgrade 16 includes the contract changes necessary for Superchain interop.
But in the meantime, take the Supersock studio for a spin. It's fun to mint onchain socks.