{"componentChunkName":"component---src-templates-project-jsx","path":"/work/gloom","result":{"data":{"prismicProject":{"uid":"gloom","data":{"project_title":{"html":"

Gloom

","text":"Gloom"},"project_hero_image":{"url":"https://images.prismic.io/michael-portfolio/bc56d486-adcc-4842-9f5a-820f18ff4654_gloom-hero.png?auto=compress%2Cformat","alt":"Gloom logo"},"body":[{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

How decentralized is DeFi? If you look at the ownership of governance tokens, the answer is "not very." With few exceptions, a handful of addresses hold majority stakes in most DeFi projects.

\n

\n \"DeFi\n

\n

Let's say you're a founder or investor in a top project like Compound, Maker, Synthetix, Aave or Chainlink and you'd like to sell a large stake. The market caps for the tokens of these projects is in the billions, so even a 5% stake is worth hundreds of millions of USD.

\n

\n \"DeFi\n

\n

How could you go about selling your tokens? There wouldn't be enough order book liquidity on a centralized exchange like Binance, nor enough pair liquidity on a decentralized AMM like Uniswap.

\n

\n \"ETH\n

\n

Large transaction today are typically negotiated off-chain through personal relationships, or in a centralized way through market makers. I think there's a better, decentralized way: a private auction – akin to an M&A sales process in traditional finance – conducted on the Ethereum blockchain.

This idea is the inspiration for Gloom, a platform I built at the ConsenSys Blockchain Developer bootcamp which enables a seller to hold an invite-only auction of ERC-20 tokens. Using Gloom, a seller invites bidders (contacts and/or "whales") to bid on the tokens, with the seller and winning bidder exchanging tokens and payment (in ETH) through an escrow contract.

\n

\n \"Gloom\n

\n

Auction process

  1. Setup: seller configures the type and amount of tokens, makes an ETH deposit into the auction contract, invites bidders (Ethereum addresses) and sets a bidder ETH deposit requirement.
  2. Commit: bidders deposit into the auction contract and present their bids (in ETH) for the tokens. Bids are hidden (salted and hashed) and recorded on the blockchain.
  3. Reveal: bidders reveal their bids (only if they match the earlier commits), with the winner determined and an escrow contract deployed.
  4. Deliver: seller and winning bidder deliver tokens and payment, respectively, to the escrow contract.
  5. Withdraw: seller and winning bidder withdraw proceeds and tokens, respectively, from the escrow contract. Everyone withdraws their deposits from the auction contract.

Links

Minimal-proxy

\n

\n \"Gloom\n

\n

As the first step in conducting an auction, the seller configures the type and amount of ERC-20 tokens they wish to sell. On submit, the React frontend (using ethers.js) calls a function on the auction factory which deploys a new auction using a minimal-proxy pattern, implemented using Open Zeppelin's ProxyFactory contract.

Minimal proxies are a way to clone contracts in order to save on transaction gas fees. When I first implemented the factory using a traditional, non-proxy pattern, creating an auction required more than 1 million gwei of gas vs. a little over 200k currently. Essentially, the minimal proxy reuses the bytecode of a pre-deployed "logic" contract using delegate calls, a pattern standardized in EIP-1167.

"}}},{"__typename":"PrismicProjectBodyCodeSolidity","slice_type":"code_solidity","primary":{"code_text":{"text":"function createAuction(\n address logic,\n uint256 tokenAmount,\n address tokenContractAddress\n) external whenNotPaused() {\n address seller = msg.sender;\n bytes memory payload =\n abi.encodeWithSignature('initialize(address,uint256,address)', seller, tokenAmount, tokenContractAddress);\n address auction = deployMinimal(logic, payload);\n auctionAddresses.push(auction);\n auctionExists[auction] = true;\n auctionBy[seller] = auction;\n emit LogAuctionCreated(auction, seller);\n}"}}},{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

Commit-reveal

\n

\n \"Gloom\n

\n

Since data on the Ethereum blockchain is publicly accessible, Gloom uses a commit-reveal pattern to conceal bids. In the commit phase, bid hashes are stored on the blockchain, hiding the amounts. Users supply passwords that are used as salts when hashing in order to prevent brute-force attacks.

In the reveal phase, bidders re-enter their bids and if the hashes match (which forces bidders to be honest), the bids are stored on the blockchain, with the winner declared. My code is based on Austin Griffith's commit-reveal implementation.

"}}},{"__typename":"PrismicProjectBodyCodeSolidity","slice_type":"code_solidity","primary":{"code_text":{"text":"function getSaltedHash(bytes32 data, bytes32 salt) public view returns (bytes32) {\n return keccak256(abi.encodePacked(address(this), data, salt));\n}\n\nfunction commitBid(bytes32 dataHash) private {\n bidders[msg.sender].bidCommit = dataHash;\n bidders[msg.sender].bidCommitBlock = uint64(block.number);\n bidders[msg.sender].isBidRevealed = false;\n emit LogBidCommitted(msg.sender, bidders[msg.sender].bidCommit, bidders[msg.sender].bidCommitBlock);\n}\n\nfunction revealBid(bytes32 bidHex, bytes32 salt) external onlyBidder inReveal {\n require(bidders[msg.sender].isBidRevealed == false, 'Bid already revealed');\n require(getSaltedHash(bidHex, salt) == bidders[msg.sender].bidCommit, 'Revealed hash does not match');\n bidders[msg.sender].isBidRevealed = true;\n bidders[msg.sender].bidHex = bidHex;\n emit LogBidRevealed(msg.sender, bidHex, salt);\n}"}}},{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

Escrow delivery

\n

\n \"Escrow\n

\n

When the seller triggers the deliver phase, the auction contract declares the winner and deploys a new escrow contract. The seller and bidder then deposit their tokens and payment (in ETH), respectively, into the contract, with checks to ensure both have deposited before allowing withdrawals.

"}}},{"__typename":"PrismicProjectBodyCodeSolidity","slice_type":"code_solidity","primary":{"code_text":{"text":"function sellerDelivery() external onlySeller {\n tokenBalance += tokenAmount;\n sellerOk = true;\n require(IERC20(tokenContractAddress).transferFrom(msg.sender, address(this), tokenAmount), 'Transfer failed');\n emit LogSellerDelivered(msg.sender, tokenAmount);\n}\n\nfunction buyerPayment() external payable onlyBuyer {\n require(msg.value == winningBid, 'Incorrect amount');\n balance += msg.value;\n buyerOk = true;\n emit LogBuyerPaid(msg.sender, msg.value);\n}"}}},{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

Escrow withdrawal

\n

\n \"\"\n

\n

Once the deposits have been completed, the seller and winning bidder are able to withdraw their deposits from the auction contract, and their sale proceeds and tokens, respectively, from the escrow contract. For withdrawals, state updates are performed before transfers made in order to prevent reentrancy attacks, one example of the design patterns used in Gloom aimed at avoiding common attacks.

"}}},{"__typename":"PrismicProjectBodyCodeSolidity","slice_type":"code_solidity","primary":{"code_text":{"text":"function sellerWithdraw() external payable onlySeller {\n require(bothOk(), 'Escrow is not complete');\n require(withdrawOk, 'Action not authorized now');\n require(address(this).balance >= winningBid, 'Insufficient balance');\n balance -= winningBid;\n (bool success, ) = msg.sender.call.value(winningBid)('');\n require(success, 'Transfer failed');\n emit LogSellerWithdrew(msg.sender, winningBid);\n}\n\nfunction buyerWithdraw() external onlyBuyer {\n require(bothOk(), 'Escrow is not complete');\n require(withdrawOk, 'Action not authorized now');\n require(IERC20(tokenContractAddress).balanceOf(address(this)) >= tokenAmount, 'Insufficient balance');\n tokenBalance -= tokenAmount;\n require(IERC20(tokenContractAddress).transfer(msg.sender, tokenAmount), 'Transfer failed');\n emit LogBuyerWithdrew(msg.sender, tokenAmount);\n}"}}},{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

Tests

I wrote unit tests for the Solidity smart contracts in JavaScript using Truffle's test framework, which builds on top of Mocha and uses Chai for assertions. I added the Truffle Assertions package for testing expected revert conditions (e.g. unauthorized message sender).

\n

\n \"Gloom\n

\n

Web3-react

On the React frontend, Gloom uses the web3-react package by Uniswap's Noah Zinsmeister to connect with the web3 provider that is injected into the browser (e.g. by MetaMask), putting it into a Context.

"}}},{"__typename":"PrismicProjectBodyCodeJsx","slice_type":"code_jsx","primary":{"code_text":{"text":"// web3Context.js\nexport default function Web3ContextProvider({ children }) {\n const web3Context = useWeb3React();\n const { activate } = web3Context;\n useEffect(() => {\n const injectedConnector = new InjectedConnector({ supportedChainIds: [42, 1337] });\n activate(injectedConnector);\n }, [activate]);\n return {children};\n}\n\n// AppRoute.js\nexport default function AppRoute({ exact, path, component: Component }) {\n return (\n \n \n \n (\n <>\n \n \n \n )}\n />\n \n \n \n );\n}\n\n// App.js\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}"}}},{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

Hooks & ethers.js

A React webapp will typical fetch data from an API, but a dApp like Gloom pulls data from the blockchain using a library like ethers.js, which can connect to Ethereum nodes through an injected provider (e.g. MetaMask, which connects to a node through the Infura API). Effectively, the smart contracts serve here as the backend.

I also frequently used ethers.js to set up contract event listeners within Effect Hooks to watch for state changes on the blockchain and then update the UI once they fire.

"}}},{"__typename":"PrismicProjectBodyCodeJsx","slice_type":"code_jsx","primary":{"code_text":{"text":"// useWinner.js Hook\nexport default function useWinner(auctionContract) {\n const { web3Context } = useContext(Web3Context);\n const { active } = web3Context;\n const [winningBid, setWinningBid] = useState(0);\n const [winningBidder, setWinningBidder] = useState('');\n\n useEffect(() => {\n if (!active || !auctionContract) return;\n const getWinner = async () => {\n const [bidder, bid] = await auctionContract.getWinner();\n if (bidder !== '0x0000000000000000000000000000000000000000') {\n setWinningBidder(bidder);\n setWinningBid(bid);\n }\n };\n getWinner();\n }, [active, auctionContract]);\n\n return { winningBid, setWinningBid, winningBidder, setWinningBidder };\n}\n\n// SellerPhaseSwitcher.js watches for winner to be declared\nexport default function SellerPhaseSwitcher({ auctionAddress }) {\n const { web3Context } = useContext(Web3Context);\n const { active } = web3Context;\n const auctionContract = useContractAt(Auction, auctionAddress);\n const { setWinningBid, winningBidder, setWinningBidder } = useWinner(auctionContract);\n\n useEffect(() => {\n if (!active || !auctionContract) return null;\n auctionContract.once('LogSetWinner', (bidder, bid) => {\n toast.success(`${bidder} won the auction with a bid of ${formatEther(bid)}`);\n setWinningBidder(bidder);\n setWinningBid(bid);\n });\n return () => auctionContract.removeAllListeners('LogSetWinner');\n });"}}},{"__typename":"PrismicProjectBodyText","slice_type":"text","primary":{"rich_text":{"html":"

Design

As the saying goes, "good artists copy, great artists steal." Gloom's neumorphism "soft UI" design is based on code I forked from Marta Mullor and CodingNepal.

"}}},{"__typename":"PrismicProjectBodyCodeJavascript","slice_type":"code_javascript","primary":{"code_text":{"text":"// globalStyles.js\nimport { createGlobalStyle } from 'styled-components/macro';\n\nconst GlobalStyle = createGlobalStyle`\n :root {\n --textPrimary: rgba(0, 0, 0, 0.8);\n --textSecondary: rgba(0, 0, 0, 0.60);\n --textDisabled:rgba(0, 0, 0, 0.38);\n --nearWhite: #ffffff73;\n --backgroundPrimary: #dde1e7;\n --gloomBlue: #536791;\n --shadow: rgba(94, 104, 121, 0.288);\n --primary: rgba(188, 0, 45, 1);\n }\n`;\n\n// buttonStyles.js\nimport styled from 'styled-components/macro';\n\nexport const Button = styled.button`\n margin: 10px 5px;\n padding: 10px;\n outline: none;\n border: none;\n border-radius: 20px;\n background: var(--backgroundPrimary);\n box-shadow: -3px -3px 5px var(--nearWhite), 3px 3px 3px var(--shadow);\n font-weight: 600;\n font-size: ${props => (props.large ? '1.1em' : '0.8em')};\n transition: 0.1s ease-out;\n\n color: ${props => (props.active ? 'var(--primary)' : null)};\n box-shadow: ${props => (props.inactive ? null : '-3px -3px 5px var(--nearWhite), 3px 3px 3px var(--shadow);')};\n\n &:hover {\n cursor: pointer;\n color: var(--primary);\n }\n\n &:active {\n color: var(--primary);\n box-shadow: inset -3px -3px 5px var(--nearWhite), inset 3px 3px 3px var(--shadow);\n }\n`;"}}}]}},"site":{"siteMetadata":{"title":"Michael Mueller | web / blockchain & financial advisor","description":"My work portfolio.","author":"Michael Mueller","siteUrl":"https://michaelmueller.dev"}}},"pageContext":{"uid":"gloom"}},"staticQueryHashes":["3649515864"]}