GithubHelp home page GithubHelp logo

vampire-swap-frontend's Issues

Add README doc

Need to add a readme doc to guide through setting up dev and basic layout of the repo and maybe deployment

Can't enter dot into swap input field

There seems to be some JavaScript input validation that prevents the user from entering dots (.). It's therefore not possible to enter fractional numbers (although pasting them into the field works). Tested in Chrome.

Work out a clearer error state.

Currently, when errors or permissions are denied by users, the state of the UI doesn't properly communicate what may be going on. Will work out better messaging to show this.

Update texts and add tooltips

Update the UI as shown here:

notes2

  • "DITTO remaining" -> "DITTO remaining for user"
  • Add spaces after available balance: and DITTO remaining for user:
  • Add tooltips (please position according to best practices)

Tooltip 1: "Your balance of the select input tokens."
Tooltip 2: "Amount of DITTO you can still receive in this swap until the per user cap is reached."
Tooltip 3: "Total amount of DITTO still available for the incentivized swaps. DITTO is allocated on a first-come, first serve basis."

Create a swap page for REB2 users

Copied from website repo # 10 by @chefchansey

Users of the token REB2 token will get an instance of the DittoSwap contract where they can swap REB2 for DITTO at an 1:1 rate. Create a copy of the vampire swap frontend and deploy to: https://ditto.money/reb2swap

Make the following changes:

Change page title to "DITTO redemption for REB2 users"
Remove the "total DITTO left" and "DITTO remaining for user" labels
The smart contract ABI is unchanged. The smart contract for this swap is already deployed and configure at:

https://etherscan.io/address/0xC621C5dc44Eb12cacEBd5959E07D8FeC508f868E

Display the current exchange rates

Display the exchange rate for every supported input token somewhere on the page, in the form

1 [INPUTTOKEN] = [n] DITTO

The number of DITTO returned for 1 input token can be obtained by calling

n = getDittoOutputAmount(1 * token_decimals, input_token_address) / 10**9

Dynamically check if a sufficient allowance already exists

Current behavior

The user is prompted to approve the input token transfer whenever the page is reloaded or the input amount changes.

Desired behavior

When the user enters an input amount into the form, check if there is already a sufficient allowance of the given input token for the the swap contract. If there is, display the "swap" button. If there isn't, display the "approve" button.

  • If the user already has approved some amount of tokens and reloads the page, they should not have to do the approval again to swap the already approved amount or less.
  • If the user already has approved some amount of tokens and changes the input amount to a smaller amount, they should not have to do the approval again.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.