airswap/airswap-web

AirSwap Web App

airswap-web's Issues

User should be alerted if wallet is on the unsupported network (ropstein, bsc, matic...)

UX design for core swap loop

User should be able to click a link to track approval transaction progress on etherscan

Sometimes balances don't populate after chain/account switch

Site navigation

Update `@airswap/metadata` `fetchTokens` response to include an errors field

Consider updating the return value to { tokens: [], errors: []} for the fetchTokens function found here: https://github.com/airswap/airswap-protocols/blob/master/tools/metadata/index.ts#L7

URL Handling / Routing

Fail gracefully if no quotes returned

Update and integrate `@airswap/validator` package

Existing Validator: https://github.com/airswap/airswap-protocols/tree/master/source/validator

This contract does pre-flight checks for errors prior to submitting a transaction. To use it on the web app, we'd need to add a checkSwap for the light protocol, either on the existing contract as checkLightSwap or a new contract.

Existing error reasons here: https://github.com/airswap/airswap-protocols/blob/master/source/validator/reasons/en_us.json

AirSwap Component Checklist

• Button
• SwapWidget
• TokenSelect
• TokenSelectorModal
• TokenWidget
• ConnectWallet
• WalletWidget
• WalletButton
• FetchBuffer
• Quote
• QuoteTimer
• SubmitModal

ref:
https://docs.google.com/spreadsheets/d/1dF04CX8Oq8YpYPQAaksPZD2KQw3TOQWpoA8OzALQg_Y/edit#gid=0

Bookmark warning

Optimally the warning pushes down the content of the entire app to keep existing padding

https://www.figma.com/file/DTJwC2mQ9kvyjM0171tqHR/New-AirSwap-Website?node-id=1261%3A2907

Add a user feedback mechanism. Perhaps direct to Discord?

Submitted Screen

https://www.figma.com/file/meufX9Gz73ox6LCzI7eoEe/AirSwap-Low-Fidelity?node-id=53%3A254

sAST holders should receive a discount on fees. See AIP 38

Display the best quote returned

Add Matomo privacy focused analytics

Wallet and Transaction Widget

https://www.figma.com/file/COO9anOeNDmWQQVmVywj1u/Visual-Design-AirSwap?node-id=3127%3A603

User should be able to check the price of a swap

Test issue

Curious to see if this shows up as a card in the project board

Create launchrock landing page to gather email addresses for early launch

User should be able to search and view a list of tokens to swap from and to

Wallet Selection Screen

https://www.figma.com/file/meufX9Gz73ox6LCzI7eoEe/AirSwap-Low-Fidelity?node-id=53%3A36

Security review

Quote Screen

https://www.figma.com/file/meufX9Gz73ox6LCzI7eoEe/AirSwap-Low-Fidelity?node-id=53%3A181

Loading Screen (Fetching, Approving)

https://www.figma.com/file/meufX9Gz73ox6LCzI7eoEe/AirSwap-Low-Fidelity?node-id=53%3A158

Static pages for main pairs

Design for pending and successful transactions

CI set up

Hosting incl. IPFS

Mobile Support and Testing

Design for transitions and animations

Add Tests for Core Loop with Dappeteer

Add "use max" button

https://www.figma.com/file/DTJwC2mQ9kvyjM0171tqHR/New-AirSwap-Website?node-id=1141%3A2107

Query Input Screen

https://www.figma.com/file/meufX9Gz73ox6LCzI7eoEe/AirSwap-Low-Fidelity?node-id=53%3A2

Integration with fallback e.g sushi

User should be able to take the trade and then confirm in wallet.

Ability to switch between amount to receive and amount to send

E.g.:

"I want 100 ETH, how much DAI do I send?"
vs (already implemented):
"I have 1,000,000 DAI, how much ETH can I get for it?"

getSenderSideOrder

Connected wallet states

Options to

Disconnect
Change

Theme Support (light / dark)

Transaction successfully submitted

Hi,

Screen state for when the user has successfully submitted a transaction. Like a "your order is on the way" confirmation, rather than the swap has successfully been mined.

Warning if a token is unverified

Add a visual indicator if a user enters greater than available balance to swap

e.g Zapper changes font to red

Token Selection Screen

https://www.figma.com/file/meufX9Gz73ox6LCzI7eoEe/AirSwap-Low-Fidelity?node-id=53%3A281

Design for error messages

e.g no quotes returned

Visual designs

Overall layout

Application frame | Information frame

Add text to README.md

Add text to basic training README.md describing:

• Call to action to star the repo
• Link to AirSwap, key resources, AIP-30
• Describe the target audience
• Brief Motivation to create repo (as per AIP-30)
• Motivation for a dev to contribute to the repo
• Overview of the Web App

Add WalletConnect

OTC Board

View all previously approved tokens