Giter VIP home page Giter VIP logo

sushiswap-interface's Introduction

SUSHI

                                      β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ                                          
                                  β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ                                    
                                β–ˆβ–ˆβ–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆ                                
                          β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆ                            
                    β–’β–’β–’β–’β–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–ˆβ–ˆ                          
                β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ                        
              β–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆ                      
            β–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ                    
            β–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ                  
          β–ˆβ–ˆβ–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆβ–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆ                
      β–“β–“β–“β–“β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ                
  β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–’β–’β–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ              
β–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–‘β–‘β–’β–’β–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆ              
β–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–’β–’β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–“β–“β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ            
  β–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–’β–’β–‘β–‘β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆ            
  β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ      β–ˆβ–ˆ  β–‘β–‘    β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆ          
                β–ˆβ–ˆ            β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–‘β–‘β–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆ        
                  β–ˆβ–ˆβ–ˆβ–ˆ    β–‘β–‘    β–‘β–‘    β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ      
                      β–ˆβ–ˆβ–ˆβ–ˆ        β–‘β–‘  β–‘β–‘  β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–ˆβ–ˆβ–ˆβ–ˆ  
                          β–ˆβ–ˆβ–ˆβ–ˆ                β–‘β–‘β–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆβ–‘β–‘β–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ
                              β–“β–“β–“β–“  β–‘β–‘    β–‘β–‘β–‘β–‘  β–‘β–‘β–ˆβ–ˆβ–’β–’β–‘β–‘β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ  β–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–ˆβ–ˆ  
                                  β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ        β–‘β–‘β–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆβ–ˆβ–ˆ    
                                  β–‘β–‘β–‘β–‘β–‘β–‘  β–“β–“β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–’β–’β–’β–’β–ˆβ–ˆβ–“β–“β–“β–“β–“β–“  β–‘β–‘    
                                                      β–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–ˆβ–ˆ                
                                                        β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–‘β–‘β–‘β–‘β–‘β–‘β–’β–’β–’β–’β–ˆβ–ˆ                  
                                                            β–ˆβ–ˆβ–ˆβ–ˆβ–’β–’β–’β–’β–’β–’β–’β–’β–ˆβ–ˆβ–ˆβ–ˆ                    
                                                                β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ                        

sushiswap-interface's People

Contributors

0xmasayoshi avatar aldoborrero avatar bayological avatar boringcrypto avatar brendanww avatar callil avatar chikeichan avatar chillichelli avatar grod220 avatar haydenadams avatar ianlapham avatar jclancy93 avatar jiro-ono avatar jonahgroendal avatar jquesnelle avatar kennyt avatar lint-action avatar lufycz avatar matthewlilley avatar mirshko avatar moodysalem avatar noahzinsmeister avatar okavango avatar omakasebar avatar paulrberg avatar rossbulat avatar sambacha avatar techinnovation-blockchain avatar topeth avatar webeli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sushiswap-interface's Issues

Please add incentivized yield farms and sushibar/xsushi on [FANTOM] chain

There are no incentivized yield farms at the moment on Fantom. Staking sushi for xsushi only works on Mainnet currently.

Please add yield farms and sushibar on the Fantom chain. It seems like only Sushi Swap works on Fantom. I can't find the Yield and Sushibar top navigation bar items (like I do on ethereum) and the following URLs just redirect to swap ..
https://app.sushi.com/yield
https://app.sushi.com/sushibar

Getting a lot of requests for sushi farms on Fantom .. please add!!! thanks!!!!

Style Improvements to Migration Page

Operational Preface:

Open a new branch when ready for review open a PR against Master. Branch should be titled migration_update and mention this issue. Once self-assigned an update is expected within 1 day or the issue is at risk of being assigned by a new claimant.

When submitting the PR please add components to the existing src/pages/Migrate folder and co-locate any relevant components within this folder as well. The existing implementation currently resides in https://github.com/sushiswap/sushiswap-interface/blob/master/src/pages/Migrate/index.tsx

You can experience the migration feature here: https://app.sushi.com/migrate

Description:

Currently the Migrate Page has various states that expand the component as the user progresses through.

Migrate

However this pattern does not signal to the user what may be upcoming and may discourage users from starting. An enhancement to this component would be to display all sections and display the actionable components once previous states have been resolved.

Screen Shot 2021-05-05 at 10 44 48 PM

Implement the following improvements based on the suggestions above. This issue is for delivering a responsive mockup and maintain the existing functionality of Migrate.

Should you need access to new colors you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Restyle PoolFinder

Operational Preface:

Open a new branch when ready for review open a PR against Master. Branch should be titled restyle_poolFinder and mention this issue.

When submitting the PR please add components to the existing src/pages/PoolFinder folder and co-locate any relevant components within this folder as well. An existing implementation can be found here: https://github.com/sushiswap/sushiswap-interface/tree/master/src/pages/PoolFinder

You can experience this feature at: https://app.sushi.com/find

Sample Design Page:

PoolFinder

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/yWJykiIb4TkV6zbLpItPDv/Exchange?node-id=70%3A67. If you are unable to access the Figma please reply in issue with an email address.

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are expected to maintain the existing functionality of the PoolFinder component.

You do not need to implement the header as this exists currently on the project

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Custom Styles for Trading View Integration

Operational Preface:

Open a new branch based off Canary when ready for review open a PR against Canary. Branch should be titled styles_td and mention this issue
Implementation can be found at: https://sushiswap-interface-git-canary-teamsushi.vercel.app/trade
Current page directory can be found at: https://github.com/sushiswap/sushiswap-interface/blob/canary/src/pages/Trade/index.tsx


td_integration

Currently a wrapper component in App.tsx sets the layout structure for this page: https://github.com/sushiswap/sushiswap-interface/blob/canary/src/pages/App.tsx#L55

You will need to remove padding to make the chart component full screen (no padding) and update the background colors (gray: #191c27, blue: #2195f1, gray outline: #2a2d38) to match the Chart colors as well as remove the gradient border. All these style changes should apply only to this page and not other pages in the application. Routing should be functional as well.

Rotating, Swipeable Announcements Banner

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled announcements_banner and mention this issue

The existing implementation can be found here: https://github.com/sushiswap/sushiswap-interface/blob/master/src/pages/Swap/index.tsx#L606

Sample Design Page:

banner

Currently there is only one announcement in the swap section. In order to allow for announcements the following enhancements should be made:

  • allow for multiple banners
  • banner should accept any jsx child element
  • auto rotating
  • keep current conditions (banner disappears when user performs a swap, this is already enabled)
  • swipeable on mobile / draggable on desktop
  • stretch: accessibility: on click on desktop user should be able to toggle with left right arrows
  • stretch: possible dots on the bottom of or inside the banner indicating which banner is current and how many there are

Mockup: Onsen AMA

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled mockup_onsen_ama and mention this issue

When submitting the PR please open a new folder under src/pages/Onsen titled Ama and co-locate any relevant components within this folder as well.


Sample Design Page:

OnsenAma

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/miPg1AqEDC8ae6WMVEzJPx/Onsen?node-id=158%3A308. If you are unable to access please reply in issue with a email address, additionally the public prototype can also be viewed here: https://www.figma.com/proto/miPg1AqEDC8ae6WMVEzJPx/Onsen?node-id=158%3A308&scaling=min-zoom&page-id=155%3A154

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks or external apis. Also you are not expected to implement the background wave pattern displayed in the design.

Additionally you will need to update routing to reflect localhost:3000/onsen/ama for the relevant screen found in the figma above. You do not need to implement the header as this exists currently on the project

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Restyle: Add Liquidity Page

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled restyle_addLiquidity and mention this issue
The current implementation can be found at: https://sushiswap-interface-git-canary-teamsushi.vercel.app/add/ETH
The current page directory can be found at: https://github.com/sushiswap/sushiswap-interface/tree/master/src/pages/AddLiquidity
Related existing components and layout (for the swap page) can be found at:https://github.com/sushiswap/sushiswap-interface/tree/master/src/pages/Swap


Sample Design Component:
addLiquidity

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/yWJykiIb4TkV6zbLpItPDv/Exchange?node-id=37%3A857. If you are unable to access please reply in issue with a email address, additionally the public prototype can also be viewed here: https://www.figma.com/proto/zibFzATC7X8UEdkGMRPllo/Staking?scaling=min-zoom&page-id=51%3A86&node-id=51%3A87

Implement the following pages based on the design above. The page is expected to be fully functional and tested on ropsten/kovan before opening a PR. Existing page provides the relevant hooks and the swap page already demonstrates a similar implementation.

You are not expected to implement the gas tracker or wallet icon, please use the existing component from the swap

Multichain wallets

Some research is needed on what wallets will be usable on other chains, and modifications to the UI to configure those and disable others.

Internationalization Switch

The code base currently uses react-i18next to handle internationalization
import { useTranslation } from 'react-i18next'

Translation constants are housed here: https://github.com/sushiswap/sushiswap-interface/tree/master/public/locales

The objective of this feature is to make a Language Selector in the Header to update the internationalization context.
Header component: https://github.com/sushiswap/sushiswap-interface/blob/master/src/components/Header/index.tsx

i18n

Please refer to the mockup above regarding implementation and reuse header subcomponents where possible. Please note on small mobile viewports internationalization switch may need to be hidden to prevent overflow.

Explorer link builder

Currency the explorer link builder is designed for etherscan only, supporting multiple chains and some with irregular explorers requires a more flexible builder to deal with these cases.

Support for these and ideally their test network compliments is a minimum.

Fantom: https://explorer.fantom.network/
Matic: https://explorer-mainnet.maticvigil.com
xDai: https://blockscout.com/poa/xdai
BSC: https://bscscan.com

Relevant code:

const ETHERSCAN_PREFIXES: { [chainId in ChainId]: string } = {

Remove UniswapV1 legacy code

We have no use for Uniswap legacy within this codebase, it adds unneeded complexity and acts as a distraction. Let's remove it!

Mockup: Token Page

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled mockup_token_page and mention this issue

When submitting the PR please open a new folder under src/pages/Token and co-locate any relevant components within this folder as well.

Sample Design Page:

token

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/n1Ifkyt7pIi1rIgMWMw6WA/Token-Page?node-id=45%3A1. If you are unable to access the Figma please reply in issue with an email address. The publicly viewable prototype can be found here: https://www.figma.com/proto/n1Ifkyt7pIi1rIgMWMw6WA/Token-Page?node-id=45%3A1

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks or external apis. Some guidance on how it should look on mobile can be found here:
https://www.figma.com/file/n1Ifkyt7pIi1rIgMWMw6WA/Token-Page?node-id=38%3A89

For the charting component please use your discretion in selecting an appropriate library. Some common ones already used across various projects are the tradingView lightweight charts (https://github.com/tradingview/lightweight-charts) or Recharts (https://github.com/recharts/recharts)

Additionally you will need to update routing to reflect localhost:3000/token/:tokenId for the relevant screen found in the figma above. You do not need to implement the header as this exists currently on the project

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Refactor i18next to lingui

Pros using lingui:

  • you don't have to use hooks (useTranslation) to rerender static text. Instead the contextprovider will load a new catalog.
  • using package @lingui/cli can easily extract messages in different formats like for example .po file
  • crowdin-github integration with husky in npm. Use a pre-commit hook to extract translations from the code. Crowdin will poll these changes and flag them in their UI for translators to translate. Once translated crowdin can create a PR on the UI

Cons using lingui:

  • Requires rewrite of current locale system

Cons of i18next:

  • Cannot properly handle special characters

Lingui solution uses 3 packages:

  • Lingui uses @lingui/react, @lingui/cli, @lingui/detect-locale

i18next uses 5 packages:

  • @babel/cli, @babel/preset-typescript, babel-plugin-i18next-extract, i18next, i18next-browser-languagedetector

Mockup: xSUSHI Use Cases Page

Operational Preface:

Open a new branch when ready for review open a PR against Master. Branch should be titled mockup_xsushi_uses and mention this issue

When submitting the PR please add components to the existing src/pages/SushiBar folder and co-locate any relevant components within this folder as well.

Sample Design Page:

MoreXSushi

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/zibFzATC7X8UEdkGMRPllo/Staking?node-id=121%3A1905. If you are unable to access the Figma please reply in issue with an email address.

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks or external apis.

Additionally you will need to update routing to reflect localhost:3000/sushibar/tips for the relevant screen found in the figma above. You do not need to implement the header as this exists currently on the project

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Inari UI

Operational Preface:

Open a new branch from Canary when ready for review open a PR against Canary. Branch should be titled Inari and mention this issue
Similar implementation can be found at: https://app.sushi.com/saave
Similar current page directory can be found at: https://github.com/sushiswap/sushiswap-interface/tree/master/src/pages/Saave

When submitting the PR please open a new folder under src/pages titled Inari and co-locate any relevant components within this folder as well.


(More details to follow ...)

Use components you feel are appropriate to integrate to the following contract hooks:
https://etherscan.io/address/0xd4c7EF086361C2beC6718D5B6E82EE32eb1E050e#code

While the UI for this is not opinionated, this implementation is expected to be fully functional and tested when submitted for PR. Please also track and submit the appropriate gas fees expended for testing.

Additionally you will need to update routing to reflect localhost:3000/inari for the relevant screens found in the figma above. You do not need to implement the header as this exists currently on the master branch

Restyle: xSUSHI Staking

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled restyle_xsushi and mention this issue
The current implementation can be found at: https://app.sushi.com/staking
The current page directory can be found at: https://github.com/sushiswap/sushiswap-interface/tree/master/src/pages/SushiBar

When submitting the PR please open a new folder under src/pages titled XSushi and co-locate any relevant components within this folder as well.


Sample Design Screen:

xsushi

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/zibFzATC7X8UEdkGMRPllo/Staking?node-id=51%3A86. If you are unable to access please reply in issue with a email address, additionally the public prototype can also be viewed here: https://www.figma.com/proto/zibFzATC7X8UEdkGMRPllo/Staking?scaling=min-zoom&page-id=51%3A86&node-id=51%3A87

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks. Existing hooks however, if you choose to wire up this mockup can be found here: https://github.com/sushiswap/sushiswap-interface/blob/master/src/hooks/useSushiBar.ts

Additionally you will need to update routing to reflect localhost:3000/staking and localhost:3000/unstaking for the relevant screens found in the figma above. You do not need to implement the header as this exists currently on the master branch

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

With regards to gradient buttons you can read the tailwind documentation for the appropriate class notation here: https://tailwindcss.com/docs/gradient-color-stops

Mockup: Transactions Page

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled mockup_transactions and mention this issue
When submitting the PR please open a new folder under src/pages titled Transactions and co-locate any relevant components within this folder as well.


Sample Design Page:
Transactions

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/yWJykiIb4TkV6zbLpItPDv/Exchange?node-id=41%3A799. If you are unable to access please reply in issue with a email address

Implement the following page based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks.

Additionally you will need to update routing to reflect localhost:3000/transactions for the relevant screens found in the figma above. You do not need to implement the header as this exists currently on the canary branch

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Harvest button on SushiSwap Yield - MATIC - does not work

Bug Description
I am using the ETH/USDT pool on Sushi Yield tab on MATIC. rewards show properly, but clicking the Harvest button does not seem to do anything. I tried 2 different RPC's but no luck. It seems that Meta Mask is not called and or does not generate the TX, leading me to believe its a api interaction issue.

Steps to Reproduce

  1. sushi.com/yield on MATIC/Polygon
  2. Click harvest for a pool you are farming in.
    ...

Expected Behavior
Expected to harvest your pending rewards. i.e generate a tx that performs the harvest.

Additional Context

Here is the console log when clicking the button:
image

Discussion around users with the issue on discord:
https://discord.com/channels/748031363935895552/749850975581241374/845719364028203060

Integrate SUSHI - xSUSHI 1-click (SushiBar app) into Swap app?

Similar to how Swap app calls wETH contract for swaps between ETH and wETH, it seems efficient to have SUSHI <-> xSUSHI enter() + leave() in Swap UI (.... users might be unfamiliar with SushiBar app, or o/wise don't want to switch contexts). **Edit: duplicative cost of approving swap router and sushibar to spend sushi token could cut against ux. For folks already on β€˜guest list’ of sushi bar through prior approval, seems useful.

Mockup SushiBar Transactions

Operational Preface:

Open a new branch when ready for review open a PR against Master. Branch should be titled mockup_xsushi_transfers and mention this issue

When submitting the PR please add components to the existing src/pages/SushiBar folder and co-locate any relevant components within this folder as well.

Sample Design Page:

TransfersSushiBar

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/zibFzATC7X8UEdkGMRPllo/Staking?node-id=51%3A480. If you are unable to access the Figma please reply in issue with an email address.

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks or external apis.

Additionally you will need to update routing to reflect localhost:3000/sushibar/transactions for the relevant screen found in the figma above. You do not need to implement the header as this exists currently on the project

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Migrate Function

https://lite.sushi.com/#/migrate

Currently has migrate functions implemented for both Hardware and Non hardware wallets. The objective is to integrate this UI (React Native) into sushiswap-interface (CRA). The relevant reference implementation can be found here: https://github.com/sushiswap/sushiswap-lite/blob/master/src/screens/MigrateScreen.tsx
https://github.com/sushiswap/sushiswap-lite/blob/master/src/hooks/useMigrateState.tsx

You do not need to implement a state management system or can make a very lightweight one for a more guided (wizard) interface. No styling is expected.

Migration also requires querying the user balance for UniV2 LP, you will need to write a new hook for this and add to src/sushi-hooks, reference implementation can be found here:
https://github.com/sushiswap/sushiswap-lite/blob/a775278d81e7c361fe6c233e1779f08d48ab6049/src/utils/fetch-utils.ts#L200

Sushi <> PoolTogether integration

Prize Bounty

$2,500 USDC from Sushi.com
+ $2,500 USDC from PoolTogether

Challenge Description

Design an implementation of PoolTogether that implements the PoolTogether interface

Implementation should take Sushi as a deposit, wraps the Sushi as xSushi for the pool yield, and unwraps the original sushi amount on pool exit.

Submission Requirements

Code standards should align with PoolTogether's implementation quality and standards.

Judging Criteria

First valid submission received.

Winner Announcement Date

First to submit.

Swap Module Alternative Styling

alternative_design

Use existing components to implement the following design. Please open a PR and a new page in the project labeled Swap2 with the appropriate routing.

Additional functionality that is not expected to be implemented but shown in the design:

  • Gas meter
  • Lock icon if token has not yet been approved on the router
  • Refresh (fetch the latest prices), this is not expected to be implemented
  • USD pricing and change in USD pricing, this is not expected to be implemented can be hardcoded for now

Your SushiBar stats not loading

Bug Description
User specific SushiBar stats not loading.

Steps to Reproduce

  1. Go to SushiBar (Main App)
  2. Click on Your SushiBar stats
  3. Wait for loading to finish
  4. See unexpected error

Expected Behavior
Should show user specific stats.

Additional Context
Some calls to the back-end are being returned with internal sever errors (status 500). See screencast.

xsushi-user-stats.mp4

Settings Dropdown Issue

Looks like merging #19 touched on some dropdown styles that were being used for settings that went unnoticed:

dropdown

Unable to fix wrong network connection

Bug Description
If the user connects using WalletConnect, but it has the wrong network selected on his mobile wallet, the "wrong network" is displayed, but there's no "disconnect" action on the app. The only way to actually disconnect is through the mobile wallet or deleting the localStorage content.

Steps to Reproduce

  1. (Using MetaMask Mobile Wallet) Set you network as Rinkeby
  2. Click Connect Wallet on app sushi interface.
  3. Select WalletConnect
  4. Scan the QRCode with MetaMask mobile wallet
  5. Accept the connection request from sushi.
  6. Now the user is stuck (at least from the app perspective)
    ...

Expected Behavior
I expect to have actions available to be taken from the app. This could be a simple "disconnect" from the current account so the app would let me try to reconnect using a valid network.

Additional Context

  • Is also worth to mention that on a refresh, the "connect wallet" button is available, but the attempt to connect using walletConnect will use the data stored on localStorage and immediately bring the app to the stuck situation described.

Sushi <> Torus Integration

Prize Bounty

1,500 USDC

Challenge Description

Fork the sushi.com UI in this repository and add the capability to use a Torus wallet in the UI.

Submission Requirements

User must provide a fork upstream fork of the sushi UI with changes implemented. Please attempt to follow our design patterns for wallets.

Judging Criteria

First valid submission received.

Winner Announcement Date

First to submit.

Mockup: Onsen Yield Page

Operational Preface:

Open a new branch when ready for review open a PR against Canary. Branch should be titled mockup_onsen_yield and mention this issue

When submitting the PR please open a new folder under src/pages/Onsen titled Yield and co-locate any relevant components within this folder as well.


Sample Design Page:

OnsenYield

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/miPg1AqEDC8ae6WMVEzJPx/Onsen?node-id=155%3A155. If you are unable to access the Figma please reply in issue with an email address. The publicly viewable prototype can be found here: https://www.figma.com/proto/miPg1AqEDC8ae6WMVEzJPx/Onsen?node-id=155%3A155&scaling=min-zoom&page-id=155%3A154

Implement the following pages based on the design above. This issue is for delivering a responsive mockup and you are not expected to integrate with any existing web3 hooks or external apis. Also you are not expected to implement the background wave pattern displayed in the design.

Additionally you will need to update routing to reflect localhost:3000/onsen/yield for the relevant screen found in the figma above. You do not need to implement the header as this exists currently on the project

Should you need access to new colors in the Figma prototype you can add those colors to the tailwinds configuration file here: https://github.com/sushiswap/sushiswap-interface/blob/master/tailwind.config.js#L23

Connect Wallet bar appearing at top of screen on chrome mobile

Bug Description
This only happens on canary.
When viewing on mobile using Chrome, the "connect wallet" bar appears at the top of the screen, covering the top bar and making the nav menu inaccessible. This only occurs on Chrome, on Firefox the bar is at the bottom of the screen as usual. I tested this on Android.

Expected Behavior
The "connect wallet" bar should appear at the bottom of the screen (unless it was purposefully changed?)

Additional Context
on chrome:
image
on firefox:
image

Restyle: Remove Liquidity Page

Operational Preface:

This issue extends #60 and will be automatically assigned to the original claimant.

Open a new branch when ready for review open a PR against Canary. Branch should add to the existing restyle_addLiquidity branch and mention this issue
The current implementation can be found at: https://sushiswap-interface-git-canary-teamsushi.vercel.app/add/ETH
The current page directory can be found at: https://github.com/sushiswap/sushiswap-interface/tree/master/src/pages/AddLiquidity

Sample Design Component:
removeLiquidty

More design details and assets can be found on Figma Dashboard: https://www.figma.com/file/yWJykiIb4TkV6zbLpItPDv/Exchange?node-id=39%3A194. If you are unable to access please reply in issue with a email address

Implement the following pages based on the design above. The page is expected to be fully functional and tested on ropsten/kovan before opening a PR. Existing page provides the relevant hooks and the swap page already demonstrates a similar implementation.

You are not expected to implement the gas tracker or wallet icon, please use the existing component from the swap

Fork sushiswap for a new Ethereum chain gives MetaMask - RPC Error

Bug Description

I have forked the Sushiswap interface for a private ethereum network, by adding another chain Id that the interface can use and modifying the right addresses. (this means rebuilding the sdk too and importing the dist into the sushiswap-interface node modules. )

Upon loading the development build of the interface and connecting to a metamask wallet, the interface initially appears successful, displaying the balance of ETH and tokens, but then after a few seconds loses connection. If I look at the console in browser, I see that when it loses connection, I get the following error:

image

If anybody has seen this problem before and might know how to fix it I would be extremely thankful!

Steps to Reproduce

  1. Go to the repo for the forked interface here, or make your own fork for a new Ethereum network
  2. Run the script script.sh

Expected Behavior
The interface should work with the Autontiy Bakerloo network (or another network it has been forked for) without losing connection and giving this error.

Additional Context

I have tried this for the Autonity Bakerloo network as described and for a local geth node, with the same results. I have also tried the forking the uniswap interface, with the same results here

I have also tried using a repo made by @tpmccallum to do the same thing here which led to the same outcome.

I believe I am not alone in having this error when attempting to fork the interface for another network, as these issues show the same problem:

makerdao/multicall#14
second-state/how_to_deploy_uniswap#4

Release with IPFS

Is your feature request related to a problem? Please describe.

Currently, the IPFS release workflow always goes failed without PINATA_KEY. details on: https://github.com/sushiswap/sushiswap-interface/runs/2655823014?check_suite_focus=true

Describe the solution you'd like

Describe alternatives you've considered
NA

Additional context
NA

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.