honey-protocol / honey-frontend-legacy Goto Github PK

Assigned to tinybigideas

• duration needs to be implemented in farms; ISO format
• live/completed button needs to be connected
• search bar needs to be implemented and farms have to be made responsive

Some useful links:
https://bobbyhadz.com/blog/javascript-convert-iso-string-to-date-object

Solana Frontend (MVP site first):

• Build a button for the thats able to request "devnet" SOL from the programs (smart contracts on Solana) of SOLfaucet
• If the above is not possible; see if you are able to console.log() the wallet address when connecting to your site with the phantom wallet and use the wallet address to send a request to solfaucet for 2 devnet sol; should not require a on chain tx
• list it on https://app.honey.finance/playground/sol temporarily

See magic eden as an example:

Probably already built by someone opensource.
TPS = Transactions Per Second

We should maintain one single source of truth with respect to components / vanilla classes and inline styles structure.

Each page has a main css layout written in ~/styles/pageName.css.ts

Whenever a page includes a component, this component should always be written inside of the components folder and maintain a structure of;
~/components/ComponentName/
/ComponentName.css.ts
/ComponentName.tsx

This way we separate the concerns regarding global and local styles for pages and components.
Also - try to style as little as possible inside of the elements itself, this due to limitations from DegenUI / preference regarding Figma Designs

ETH Frontend (MVP site first):

• Build a button thats able to request "MATIC" on Mumbai Polygon from the smart contracts used by Polygon Faucet or build a faucet yourself!
• If the above is not possible; see if you are able to console.log() the wallet address when connecting to your site with the metamask wallet and use the wallet address to send a request to the polygon faucet for however many MATIC; should not require a on chain tx
• list it on https://app.honey.finance/playground/mumbai temporarily

In order to make all loan routes dynamic, dummy data sets should be created. Honey SDK provides an CLI for this matter

When implementing the SDK we should maintain one single source of truth with respect to components / vanilla classes and inline styles structure.

Each page has a main css layout written in ~/styles/pageName.css.ts

Whenever a page includes a component, this component should always be written inside of the components folder and maintain a structure of;
~/components/ComponentName/
/ComponentName.css.ts
/ComponentName.tsx

This way we separate the concerns regarding global and local styles for pages and components.
Also - try to style as little as possible inside of the elements itself, this due to limitations from DegenUI / preference regarding Figma Designs

The following input field;

Should correspond to the range input

The alignment of the cards with respect to vault name / total borrowed / interest / available / your positions. We should consistently and equally divide between the space that we have. E.g. give a min width to each field and set a max char for each field. On hover we could display full amount of text and/or quantity;

Just the base integration to get the setup running where we can communicate with the SDK

fetching open positions

https://blog.maximeheckel.com/posts/switching-off-the-lights-part-2-fixing-dark-mode-flashing-on-servered-rendered-website/

While changing browser width, the FarmCollectionCards show with different heights as shown below.
The fix requires to apply an ellipsis/keep max title width consistent or increase internal padding in cards to standardize their height:

Describe the feature you'd love to see
A clear and concise description of what you'd love to see added to the HONEY frontend.

Additional context (optional)
Add any other context or screenshots about the feature request here.

• Show logo of specified coin
• Radio drag
• Clickable 25% - 50% - 75% - 100% buttons
• Logo's of assets borrowed
• Colour for liquidation threshold
• Helper functions for calculating borrow / repay data fields

Describe the feature you'd love to see
Themeing (with a default of orange/yellow).

Additional context (optional)
As per @BowTiedHeron suggestion in discord, theme could change when user clicks on "Honey Finance", similar to what happens on the Degen UI documentation.

Buttons should interact with dummy markets injected via CLI.

TODO;
Write out complete flow

Unlocking and locking vaults take too long, a refresh is required almost each time (would need a toastify notification for this (this is probably quicker) or optimisation fix)

We should call upon the honey SDK to Fetch the NFTs - this will probably cause for some styling changes / change in the looping that's currently being done.

• Integration of dynamic data
• Render NFTs in grid
• Add active state to NFT

Governance looks like the same disabled button as Dashboard and Loans

If we want people to use Governance, we should make it clear that it's clickable.

If we want people to know Dashboard and Loans are coming soon but not clickable then label it as such( coming soon...) label. Don't fool users.

Additional context (optional)
Add any other context or screenshots about the feature request here

.

Fetching nfts from the wallet

On the main lending / borrowing page make the search input field dynamic by actually filtering the list of vaults etc.
We should also make this input field error proof with respect to vulnerabilities in general (XSS / injection) but also datatypes input / max input char.

See screenshot;

When user initializes the account the first time, the button should change from initialize to deposit.
Or else users will keep wasting sol to initialize given to initialize again will always result in failure!

Text and plus icon should turn white with respect to contrast.

• Add base textual layout (based on dummy data)
• Make all input fields error proof (max / min input)
• Add styles for Deposit / Withdraw

Add layout following Figma designs

• Main layout
• Make vault list scrollable, keep parent height constant
• Make AssetRow component show data fields with consistent spacing/vertical alignment(see pic below)
  Related to #8 @bowtiedpyro

We should create a standardised way of writing code incl. comments / structure of functions / helpers / keep the files as clean as possible.

To improve upon issue #151

See feedback from #145 regarding styling.

Implement second page (layout) with two main containers:
A. User NFTs available from vault
B. Interface to borrow/repay tokens based on NFT value

• Open positions with NFT selection module
• Borrow module
• Repay module

Would be good to have a localization.json file or similar that can be dynamically referenced in the app and referenced on a per language selection basis ie:

///Json file:

[
   {
      "en-gb" : {
         "welcomeMessage": "Welcome"
      },
      "de-DE": {
         "welcomeMessage": "Willkommen"
      }
   }
]

///Used in the components/pages as:

import strings from './localization.json'

<h1>{strings.welcomeMessage}</h1>

We should have a consistent button state, meaning; when borrow or loan button is active - our wallet button should present the same state when our wallet is active. See screenshot; shame colour as the Loan button in this example.