Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Implement in-app token swap modal for purchasing voting power #951

Open
bonustrack opened this issue Oct 29, 2024 · 0 comments
Open
Labels

Comments

@bonustrack
Copy link
Member

Objective

Implement a feature that allows users to buy voting power directly within the Snapshot UI by swapping tokens using CoW Swap protocol via the @cowprotocol/cow-sdk library.

Requirements

Modify the existing "Buy" button in the voting power modal, which currently redirects to an external site. Instead, it should open a new modal within our site containing a token swap form. You can see the voting power modal if you go here: https://snapshot.box/#/s:uniswapgovernance.eth/proposals log in and click on the button with a ⚡ icon.

image

The token swap form should have two inputs:

Sell input:

  • Numeric field for the amount to sell.
  • Includes a token selector dropdown, defaulting to ETH.

Buy input:

  • Numeric field showing the amount to receive.
  • The token is pre-selected from the voting power modal (non-editable).

Features

  • Updating either the "Sell" or "Buy" amount automatically adjusts the other field based on current exchange rates using the @cowprotocol/cow-sdk.
  • Display the user's current balances for both tokens.
  • Include a "Max" button to set the "Sell" amount to the user's maximum available balance.
  • Ensure that swap calculations and rates match those on CoW Swap.
  • Users should be able to successfully complete the token swap on-chain to purchase voting power.

Recommendations

  • Use the Sepolia testnet network for integration and testing to not pay any gas fee.
  • Design the modal and form to align with the site's existing style and UI/UX patterns.
  • Reuse existing components where appropriate (e.g., token selection modal). You can find an example of the token selection modal here: https://snapshot.box/#/s:fabien.eth/treasury/1/tokens when you click on the send button in top right of the page.
  • Reference Uniswap's Swap Interface for user experience inspiration.

Nice to have

  • Display dollar value equivalents for "Sell" and "Buy" amounts.
  • Show exchange rate and slippage (price impact) information.
  • Lazy-load the @cowprotocol/cow-sdk dependency for performance optimization.
  • Offload heavy logic to a serverless function (e.g., Fleek or Cloudflare Workers).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant