Giter VIP home page Giter VIP logo

index-ui's Introduction

Index UI

License

Index UI is a simple front-end used to interact with Index. This front-end describes Index and consolidates relevant links to onboard users onto the protocol's basic functionalities. It also allows users to stake, unstake, and claim INDEX tokens during the initial distribution + liquidity mining phase of the protocol's launch.

Local development

This project was created with create-react-app. Refer to their docs for advanced usage.

Prerequisites

  1. Install Node 14+
  2. Install yarn
  3. Fork this repo
  4. Clone your fork locally

Steps

  1. Make a copy of the prod env file
    cp .env.prod .env
  2. Install all the dependencies
    yarn install
  3. Start the app in development mode on localhost:3000
    yarn start
  4. Navigate to http://localhost:3000/. The changes you make locally should live-reload in the app.

Testing

Unit tests

Run unit tests in watch mode

yarn test

Run E2E Tests with Cypress

To run e2e test with Cypress, first you must serve a local instance

yarn start

Once that is served, in another terminal, navigate to the repo and run

yarn run e2e

This will kick off Cypress to run headlessly.

Writing and Debugging Cypress Tests

If you wish to write a test, or debug yours, you can do so with the help of the Cypress tool by running

yarn run cypress:open

This will allow you to see and select items on page, more easily obtaining their IDs, selectors, etc. More information on this can be found on the Cypress docs

Helpful Commands

Build the app for production in the build folder.

yarn build

Eject the app from create-react-app rails.

yarn eject

This project uses browserslist. We need to regularly update browser data via

npx browserslist --update-db

Contributing

The main purpose of this repository is to continually serve the needs of Index, making it faster, simpler, and easier to use. As new proposals are submitted and the scope of Index's governance evolves, we anticipate this tool will change as well.

We greatly encourage any community contribution that may help Index reach more users and promote greater adoption, so be sure to check out our Contribution Guidelines for ways to get involved with our project.

Style Guide

Absolute imports

Prefer absolute imports over relative imports because this is a loose codebase convention. Refer to Configuring React Absolute Imports For TypeScript if your editor isn't picking up absolute imports.

// Good
import Page from 'components/Page'

// Bad
import Page from '../../components/Page'

Import ordering

Order library imports at the top of the file, then a newline separator, then imports for exported members that are defined in this package.

// Good
import React, { useEffect } from 'react'
import { Container, Spacer } from 'react-neu'

import Page from 'components/Page'
import Explanation from 'components/Explanation'
// Bad
import React, { useEffect } from 'react'
import Page from 'components/Page'
import { Container, Spacer } from 'react-neu'
import Explanation from 'components/Explanation'

License

Index UI is MIT licensed.

index-ui's People

Contributors

0xmodene avatar boda805 avatar controtie avatar dalberto avatar dependabot[bot] avatar devondefi avatar dondaryl avatar gamma58 avatar inje avatar janndriessen avatar jasonrsadler avatar jierlich avatar julianar97 avatar justinkchen avatar kibagateaux avatar mridul7ahuja avatar ncitron avatar omnifient avatar pietro-g avatar pouta avatar ripples3 avatar rootulp avatar theodorechuang avatar tytarman avatar willhamilton24 avatar ztcrypto 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

index-ui's Issues

Rewards monthly dropdown list is clipped inside containing Card.

Describe the bug
When a user attempts to select a Reward month from the drop down, later months are hidden by the Card's bounds

To Reproduce
Steps to reproduce the behavior:

  1. Go to index coop top nav->Governance->Rewards
  2. Click dropdown labeled 'Select a Reward Month'
  3. Attempt to select a month prior to Jan '21
  4. Observe truncated dropdown list

Expected behavior
All months should be displayed and able to be selected

Screenshots
Clipped:
image

Expected:
image

Desktop (please complete the following information):

Brave 1.31.87 Chromium: 95.0.4638.54 (Official Build) (64-bit)
Revision d31a821ec901f68d0d34ccdbaea45b4c86ce543e-refs/branch-heads/4638@{#871}
OS Windows 10 Version 21H1 (Build 19043.1237)

Smartphone (please complete the following information):
Not Tested

Additional context
The Card component comes from react-neu package which doesn't expose overflow as a prop but sets it directly:
https://github.com/clintonbembryjr/react-neu/blob/master/src/components/Card/Card.tsx#L8

Consolidate MarketData components

We only need one MarketData component for the product pages, where currently we use a new one for each page. Make the code reusable.

Token data structure needs consolidation

The token data is kind of everywhere, and this increases pain when adding new products to the site. The token metadata should be in one place, so as to make it easier to discover and prevent data mismatch issues.

Add connect to rainbow button

Describe the solution you'd like
Add a new wallet option in the wallet select model for the Rainbow wallet. When the button is clicked just use WalletConnect.
Some inspiration for how to style it:
https://christianbaroni.github.io/rainbow-buttons
https://github.com/rainbow-me/rainbow-button

Additional context
Mike Demarais from https://rainbow.me requested this feature. They've been a huge supporter of the coop and show the DPI prominently on the dashboard of their wallet.
Rainbow wallet connects via WalletConnect. They've been trying to get dapps to create a special "connect to rainbow" button which is just WalletConnect under the hood with their logo slapped on it.

Create a Pull Request Template

Is your feature request related to a problem? Please describe.
A Pull Request template would help define the process for contributors

Describe the solution you'd like

  • Create a PULL_REQUEST_TEMPLATE.md file
  • populate it akin to how it's described here

Additional context
Reach out to me here or on Discord (or #dev channel) to sus out details of what the checkboxes could be.
Some can be:

  • Reviewed CONTRIBUTING.md
  • Tested local instance
  • Requested Review
  • Linked related issues

There can be more, but off the top of my head those seem necessary. Reach out to myself or @controtie for further input

Create Contribution Guidelines

The index-ui repo needs contribution guidelines to make things easier for newcomers trying to get the lay of the land.

  • Create a CONTRIBUTING.md file at project root
  • Populate that file with something akin to this

The contents of this probably should be discussed in #dev channel on the Discord, as our needs will inevitably be different than other repos.

Clean Up Build Warnings

The repo has a couple of build warnings that are pretty trivial to remedy

The browser list needs updating, which can be done by running
npx browserslist --update-db

When running yarn start to serve the website locally, the following warnings can be found:
Screen Shot 2021-07-11 at 9 54 31 PM

If after resolving all the above warnings there are a few new ones, those also need to be resolved.

FLI rebalancing equations incorrect

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://www.indexcoop.com/ethfli or https://www.indexcoop.com/btcfli
  2. Scroll down to the bottom equation
  3. See that the equation says CLRt+1 = max(MINLR, min(MAXLR, TLR * (1 — RS) + CLRt * RS)) (this is wrong)

Expected behavior
Equation for calculating the new leverage ratio should be:
CLRt+1 = max(MINLR, min(MAXLR, CLRt * (1 - RS) + TLR * RS))

NAV premium/discount as a percentage next to price

Is your feature request related to a problem? Please describe.
Mr Madilla has requested that NAV premium/discount be shown as a percentage near the price

Additional context
This percentage should be based on chart price compared to NAV. May need to look into other price feeds for DPI, or how to get faster responses out of CG.

Modular Product UI

The Product UI needs to be more modular. When onboarding new products, we really need to be able to do essentially a quick copy pasta. Ideally, this component should:

  • Should use as much of the current UI as possible
  • Should implement the copy portion of the product component as a child (ie. the Page component)
  • Should use data that's retrieved either on the individual product component, or via a passed in token ID from productTokens.ts

Update Rewards Page with message

Note this Discord message: https://discord.com/channels/762061559744299010/762062707548487691/840540220063612959

There is a need to remind people that they aren't able to claim rewards to a CEX wallet, and we should note that on the rewards page.

Describe the solution you'd like
This could be solved by displaying some text as mrvls described in discord.

Describe alternatives you've considered
I'm unsure of a good alternative, but additional prevention could be had by reminding contributors to send web3 addresses when collecting for rewards.

React warnings on How to Buy page

Describe the bug
React console errors observed on the How to Buy page

To Reproduce
Steps to reproduce the behavior:

  1. Go to http://localhost:3000/how-to-buy
  2. Open Chrom dev console
  3. Observed errors of the form:
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (at HowToBuy.tsx:74)
    in div (at HowToBuy.tsx:71)
    in ol (at HowToBuy.tsx:166)
    in p (created by styled.p)
    in styled.p (at HowToBuy.tsx:162)
    in div (at HowToBuy.tsx:157)
    in div (created by styled.div)
    in styled.div (at HowToBuy.tsx:156)
    in div (created by styled.div)
    in styled.div (created by Container)
    in Container (at HowToBuy.tsx:125)
    in div (created by styled.div)
    in styled.div (at Page.tsx:8)
    in div (created by styled.div)
    in styled.div (at Page.tsx:7)
...

Expected behavior
No console errors

Screenshots
Screen Shot 2021-09-21 at 9 41 51 PM

Desktop (please complete the following information):
Chrome

Failed to compile

I have clone this repo, run npm install, and yarn start, there is error,

Failed to compile
./src/hooks/useLocalStorage.ts
Line 0: Parsing error: Cannot read property 'map' of undefined

How can I do?
OS:ubuntu 20

Fix the background scrolling effect

Describe the bug
On the app, after clicking/tapping on Connect Wallet, the overlay does not prevent the background from scrolling. This issue also occurs when the Mobile Menu is open on any mobile device.

To Reproduce
Steps to reproduce the behavior:

  1. Go to app.indexcoop.com
  2. Click on Connect Wallet
  3. Scroll down to the bottom of the menu in the overlay, then continue scrolling and notice the background scrolling effect.

Expected behavior
The background scrolling effect should be disabled while an overlay is present. This provides a cleaner and more professional experience for users.

Desktop (please complete the following information):

  • OS: All
  • Browser: All
  • Version: All

Smartphone (please complete the following information):

  • Device: All
  • OS: All
  • Browser: All
  • Version: All

Investigate Set component allocations with Ledger

I'm having trouble getting the set allocations to show up when connecting my ledger.
The error I'm receiving is An operation that changes the device state is in progress.

I'm not an expert on our ledger integration. This shows up in my google search:
https://github.com/crosswalk-project/chromium-crosswalk/blob/master/third_party/WebKit/Source/modules/webusb/USBDevice.cpp

Originally posted by @controtie in #422 (comment)

Investigate this on website-v2-master branch

Link to the V2 Website

Problem

Currently, there is no way to return to www.indexcoop.com once you navigate to app.indexcoop.com from the V2 website. There should be a way for users to easily navigate back to the V2 marketing website after they have chosen to access the App.

 

Solution

Convert the Logo in the upper left portion of the app page to a Link that will navigate users back to www.indexcoop.com. This is a relatively hidden but functional change.

Display product NAV

we need to display premium/discount calculation on the buy/sell process between NAV and DEX price

This will actually be changed to displaying the NAV on the product page

BTC2xFLI UI

The BTC FLI UI needs to be created and prepared for the token launch

Prepare CGI for deprecation

The following should be performed for the CGI product page to prepare it for deprecation:

  • Show a warning toast informing the user of inaccuracies with the CoinGecko data
  • Disable buying/selling of CGI sitewide

High risk vulnerabilities in dependencies

As the website integrates with the user wallet, we must be very careful to not introduce any attack vectors that could put our users funds in danger.

After running npm audit I found one that should be solved ASAP:

web3 package has a vulnerability that may leak the private keys. The vulnerability page states the following:

Exploiting this vulnerability likely requires a Cross-Site Scripting vulnerability to access the private key.

Other notable vulnerabilities:

Update Chart Y Axis Markers

Is your feature request related to a problem? Please describe.
The YAxis component's min/max labels aren't clear, which can be problematic since the numbers are so close to the price.

Describe the solution you'd like
The YAxis should prepend the current values with High and Low, respectively.

Describe alternatives you've considered
If you have a better idea to indicate to the user that these represent the Y Axis range (ie. making the chart itself more distinguishable as well), then go ahead and try that.

Additional context
image

Vote page upgrades

Some things can be added to the /vote page, and probably need some input from the design team

  1. Indicate vote pass/fail
  2. Indicate quorum
  3. Indicate voting deadline

How do we consider Boardroom vs Snapshot? What does governance look like for us going forward?

Failed to compile

I have been trying to resolve this error

`C:/Users/user/index-ui/src/components/BuySell/components/TokenInputs.tsx
TypeScript error in C:/Users/user/index-ui/src/components/BuySell/components/TokenInputs.tsx(25,28):
Expected 1 arguments, but got 0. TS2554

23 |   } = useBuySell()
24 | 
25 |   const currencyInputRef = useRef<any>()
     |                            ^
26 |   const setTokenInputRef = useRef<any>()
27 | 
28 |   const theme = useTheme()`

View Balance - Wallet Bug

Describe the bug
Viewing Wallet Balance on a Mac laptop does not allow the ability to scroll through balances. Scroll is unresponsive. Additionally, the wallet is opening the bottom of the balances page, rather than the top of the wallet balances.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the Index website.
  2. Click on 'View Balances' in the top right corner.
  3. Attempt to scroll...

Expected behavior
The popup window should open with the ability to scroll through balances seamlessly, but it should also open at the top of the scrollable window (not the bottom).

Screenshots
view-balances-bug

Desktop (please complete the following information):

  • OS: [OSX 10.13.6]
  • Browser [Brave]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [1.24.86 Chromium: 90.0.4430.212 (Official Build) (x86_64)]

Additional context
Problem does not appear to be present on Android or iPhone. I have not tested Windows at this time but will update accordingly once test has been ran.

Buy/Sell widget needs better padding

Describe the bug
The Buy/Sell widget has some broke padding when trying to select token, and it seems to cut off the last couple pixels of each token in the list

To Reproduce
Steps to reproduce the behavior:

  1. Go to http://indexcoop.com/dpi
  2. View Buy/Sell widget, should see something like the below screenshot

Expected behavior
This should not cut the letters off prematurely

Screenshots
image

Desktop (please complete the following information):

  • OS: Mac
  • Browser: Brave

BED Page and other Token Stats bugs

Describe the bug
Coingecko is slow to roll out the MCAP for BED, and this seems to be a common pattern with them. Alongside this, there seems to be a bug caused by this that prevents the hiding of the supply cap stat, which should not show for simple indices

Expected behavior
The BED product page should show an MCAP differently than it currently does.
By default, the value should be '--'.
If MCAP is provided by CoinGecko, instead show it.
Else, a rough estimate of MCAP should be calculated, formatted, and show (currentSupply * CG Price). This also requires a user to connect their wallet. You might have to pass this value in and add it to ProductTokenStatsProps (this will cascade to a few changes on each product page)

For supply cap: @ src/components/ProductPage/ProductTokenStats.tsx:30
image
Move supplyCap ? to line 39 below, following the pattern on streamingFee (ln 32)
image

Screenshots
image

Additional context
Supply data is coming from the token contract, so it will require a provider.

WalletConnect No Longer Working

Describe the bug
WalletConnect no longer seems to be working on our website

To Reproduce
Steps to reproduce the behavior:

  1. Click 'Unlock Wallet'
    image

  2. Select WalletConnect
    image

  3. See Error

Expected behavior
This should properly connect to the dapp via WalletConnect

Read token contract decimals from on-chain

Is your feature request related to a problem? Please describe.
Since not all token contracts use 18 decimal places, #422 includes a HACKHACK that special cases the number of decimals for particular token contracts.

Describe the solution you'd like
Let's remove the HACKHACK and read decimals() from on-chain.

Additional context
In order to resolve this issue, we'll likely need to perform one Web3 request per product component. There are currently 18 (DPI) + 15 (MVI) + 3 (BED) + 2 (ETH2xFLI) + 2 (BTC2xFLI) + 7 (DATA) = 47 components. Will front-end performance degrade if we perform 47 Web3 requests? I don't think so but we'll see.

Fee discrepancy on ETH2x FLI and BTC2x FLI token pages

For both the ETH2x FLI token page and BTC2x FLI token page, the streaming fee is listed in bold as 0.95% under the 'stats' section. At the very bottom of the page, the fee is listed at 1.95%.

This issue could result in confusion and undesirable entry into the index due to misinformation.

Update the partners on the homepage

Is your feature request related to a problem? Please describe.
Sushiswap does not appear on our homepage under the 'Earn Yield' section, even though we have pools in the Onsen. Since making that page, Sushi has also added Kashi, so we can show users they can leverage DPI

Describe the solution you'd like
'Lend and Borrow' section:

  • Move 'Lend and Borrow' section to a new row under Wallets section
  • Add Sushiswap to the section after CREAM:

'Earn Yield' sectopm

Also be sure to make 'Call & Put Options' and 'Smart Contract Covers' mimic the styling of 'Exchanges' in regards to stretching the two remaining items to fill the space. The same should apply for the relocated 'Lend and Borrom'

Additional context
We seem to be missing an image for Opyn as they've changed their logo. Perhaps use this one?
image

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.