Gloom

function createAuction(
  address logic,
  uint256 tokenAmount,
  address tokenContractAddress
) external whenNotPaused() {
  address seller = msg.sender;
  bytes memory payload =
    abi.encodeWithSignature('initialize(address,uint256,address)', seller, tokenAmount, tokenContractAddress);
  address auction = deployMinimal(logic, payload);
  auctionAddresses.push(auction);
  auctionExists[auction] = true;
  auctionBy[seller] = auction;
  emit LogAuctionCreated(auction, seller);
}

Commit-reveal

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.

function getSaltedHash(bytes32 data, bytes32 salt) public view returns (bytes32) {
  return keccak256(abi.encodePacked(address(this), data, salt));
}

function commitBid(bytes32 dataHash) private {
  bidders[msg.sender].bidCommit = dataHash;
  bidders[msg.sender].bidCommitBlock = uint64(block.number);
  bidders[msg.sender].isBidRevealed = false;
  emit LogBidCommitted(msg.sender, bidders[msg.sender].bidCommit, bidders[msg.sender].bidCommitBlock);
}

function revealBid(bytes32 bidHex, bytes32 salt) external onlyBidder inReveal {
  require(bidders[msg.sender].isBidRevealed == false, 'Bid already revealed');
  require(getSaltedHash(bidHex, salt) == bidders[msg.sender].bidCommit, 'Revealed hash does not match');
  bidders[msg.sender].isBidRevealed = true;
  bidders[msg.sender].bidHex = bidHex;
  emit LogBidRevealed(msg.sender, bidHex, salt);
}

function sellerDelivery() external onlySeller {
  tokenBalance += tokenAmount;
  sellerOk = true;
  require(IERC20(tokenContractAddress).transferFrom(msg.sender, address(this), tokenAmount), 'Transfer failed');
  emit LogSellerDelivered(msg.sender, tokenAmount);
}

function buyerPayment() external payable onlyBuyer {
  require(msg.value == winningBid, 'Incorrect amount');
  balance += msg.value;
  buyerOk = true;
  emit LogBuyerPaid(msg.sender, msg.value);
}

Escrow withdrawal

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.

function sellerWithdraw() external payable onlySeller {
  require(bothOk(), 'Escrow is not complete');
  require(withdrawOk, 'Action not authorized now');
  require(address(this).balance >= winningBid, 'Insufficient balance');
  balance -= winningBid;
  (bool success, ) = msg.sender.call.value(winningBid)('');
  require(success, 'Transfer failed');
  emit LogSellerWithdrew(msg.sender, winningBid);
}

function buyerWithdraw() external onlyBuyer {
  require(bothOk(), 'Escrow is not complete');
  require(withdrawOk, 'Action not authorized now');
  require(IERC20(tokenContractAddress).balanceOf(address(this)) >= tokenAmount, 'Insufficient balance');
  tokenBalance -= tokenAmount;
  require(IERC20(tokenContractAddress).transfer(msg.sender, tokenAmount), 'Transfer failed');
  emit LogBuyerWithdrew(msg.sender, tokenAmount);
}

// web3Context.js
export default function Web3ContextProvider({ children }) {
  const web3Context = useWeb3React();
  const { activate } = web3Context;
  useEffect(() => {
    const injectedConnector = new InjectedConnector({ supportedChainIds: [42, 1337] });
    activate(injectedConnector);
  }, [activate]);
  return <Web3Context.Provider value={{ web3Context }}>{children}</Web3Context.Provider>;
}

// AppRoute.js
export default function AppRoute({ exact, path, component: Component }) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ContextProvider>
        <LoadingContextProvider>
          <Route
            exact={exact}
            path={path}
            component={() => (
              <>
                <Banner />
                <Component />
              </>
            )}
          />
        </LoadingContextProvider>
      </Web3ContextProvider>
    </Web3ReactProvider>
  );
}

// App.js
export default function App() {
  return (
    <Router>
      <Head />
      <GlobalStyle />
      <Switch>
        <Route exact path='/' component={Home} />
        <AppRoute exact path='/seller' component={SellerDashboard} />
        <AppRoute exact path='/bidder' component={BidderDashboard} />
        <AppRoute path='*' component={NotFound} />
      </Switch>
      <ToastContainer />
    </Router>
  );
}

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.

// useWinner.js Hook
export default function useWinner(auctionContract) {
  const { web3Context } = useContext(Web3Context);
  const { active } = web3Context;
  const [winningBid, setWinningBid] = useState(0);
  const [winningBidder, setWinningBidder] = useState('');

  useEffect(() => {
    if (!active || !auctionContract) return;
    const getWinner = async () => {
      const [bidder, bid] = await auctionContract.getWinner();
      if (bidder !== '0x0000000000000000000000000000000000000000') {
        setWinningBidder(bidder);
        setWinningBid(bid);
      }
    };
    getWinner();
  }, [active, auctionContract]);

  return { winningBid, setWinningBid, winningBidder, setWinningBidder };
}

// SellerPhaseSwitcher.js watches for winner to be declared
export default function SellerPhaseSwitcher({ auctionAddress }) {
  const { web3Context } = useContext(Web3Context);
  const { active } = web3Context;
  const auctionContract = useContractAt(Auction, auctionAddress);
  const { setWinningBid, winningBidder, setWinningBidder } = useWinner(auctionContract);

  useEffect(() => {
    if (!active || !auctionContract) return null;
    auctionContract.once('LogSetWinner', (bidder, bid) => {
      toast.success(`${bidder} won the auction with a bid of ${formatEther(bid)}`);
      setWinningBidder(bidder);
      setWinningBid(bid);
    });
    return () => auctionContract.removeAllListeners('LogSetWinner');
  });

// globalStyles.js
import { createGlobalStyle } from 'styled-components/macro';

const GlobalStyle = createGlobalStyle`
  :root {
    --textPrimary: rgba(0, 0, 0, 0.8);
    --textSecondary: rgba(0, 0, 0, 0.60);
    --textDisabled:rgba(0, 0, 0, 0.38);
    --nearWhite: #ffffff73;
    --backgroundPrimary: #dde1e7;
    --gloomBlue: #536791;
    --shadow: rgba(94, 104, 121, 0.288);
    --primary: rgba(188, 0, 45, 1);
  }
`;

// buttonStyles.js
import styled from 'styled-components/macro';

export const Button = styled.button`
  margin: 10px 5px;
  padding: 10px;
  outline: none;
  border: none;
  border-radius: 20px;
  background: var(--backgroundPrimary);
  box-shadow: -3px -3px 5px var(--nearWhite), 3px 3px 3px var(--shadow);
  font-weight: 600;
  font-size: ${props => (props.large ? '1.1em' : '0.8em')};
  transition: 0.1s ease-out;

  color: ${props => (props.active ? 'var(--primary)' : null)};
  box-shadow: ${props => (props.inactive ? null : '-3px -3px 5px var(--nearWhite), 3px 3px 3px var(--shadow);')};

  &:hover {
    cursor: pointer;
    color: var(--primary);
  }

  &:active {
    color: var(--primary);
    box-shadow: inset -3px -3px 5px var(--nearWhite), inset 3px 3px 3px var(--shadow);
  }
`;