goosefx1/gfx-web-app

GooseFX - Your Solana DeFi Destination. Trade Perps, Earn Yield in SSL Pools, Stake GOFX & Get Rewarded

gfx-web-app's Issues

Error building from source

Input:

git clone https://github.com/GooseFX1/gfx-web-app.git
cd gfx-web-app
yarn --pure-lockfile
yarn start

Output:

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/jordan/gfx-web-app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/jordan/gfx-web-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/jordan/gfx-web-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/jordan/gfx-web-app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/jordan/gfx-web-app/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/jordan/gfx-web-app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/jordan/gfx-web-app/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/jordan/gfx-web-app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/jordan/gfx-web-app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/jordan/gfx-web-app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/jordan/gfx-web-app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.7.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Farming: parent container issues

The parent container of the content in the Farm page is currently taking up the entire page and has horizontal scrolling as a result of overflow in the list items.

Fix the container padding to match the figma mockups and remove horizontal scrolling within the container

Bugs/issues/enhancements

Verified collection text (typo)

Crypto-trading - Orderbook functionality - Minimize bar on top of orderbook should not collapse the order form

Intent: Collapsing the order form is not in-line with normal user expectations when deciding to expand the order book. To keep behavior aligned, we do not want the order form to disappear when the user selects the button to expand the order book.

The default number of rows displayed in the order book is 10.
When a user clicks the expand button on the order book, that displayed rows count increases to 20.

Requirements:

• When a user clicks the expand order book button, the form should not disappear.
• The additional rows in the order book should be displayed at the bottom of the order book without moving the rest of the page components around.
• If expanding to 20 rows cannot fit on the page by default, we will discuss other ways to handle it.

NFT Market: Attributes Selector on Mint Single NFT

Update the style of the attributes section on the UpLoadNFT to reflect V2 styles.

Current state

Desired style but the title should not change, it should stay as current "Attributes"

Burn - after initial mint, the available balance is not updated on burn tab. Will update after disconnecting/reconnecting wallet

NFT Market: Remove Create NFT Preview Network Request

Currently, in the "create single nft" flow, when a user uploads a file, the preview image is firing a network request. This request errors out and prevents the preview to render. This is unneeded and should be removed.

See antd docs for info: https://ant.design/components/image/

When the input fields are updated with an errored preview image, it will remove the error message. It is likely that removing the network request will fix this but make sure that it does not appear under any circumstance

No tooltips

No "eye" icon and no click events should fire on either preview image. The only action on the small preview should be the delete action

Link to Docs on About Us

When you click on About, it should create a dropdown menu that has an item called, "Docs" and leads to https//docs.goosefx.io

NFT Market: Font consistency across components

There are several cases in the NFT market where the theme font 'Montserrat' is not being render in the UI. Go through all of the component styles and make sure that all styles are inheriting this font family

NFT Market: Deeplink to Single NFT support

The route for the NFTDetails and Sell component pages use an optional route param of :nftMintAddress. The component is currently not set up to read that route param and ensure that the component has the data it needs to render.

import { useParams } from 'react-router-dom'
const params = useParams<IAppParams>()
params.nftMintAddress

Create a useEffect hook that evaluates if the route param exists and the current context

if param "nftMintAddress" is present && general and nftMetadata === undefined, make a web3 call:
getParsedAccountByMint(nftMintAddress) then setGeneral() and setNftMetadata()

The component should only render the JSX if general and nftMetadata are defined.

A working solution should allow the user to paste in or reload the url "https:localhost:3000/NFTs/details/" and "https://localhost:300/NFTs/sell/" and see all the details data.

NFT Market: parent container issues

The parent container of the content in the NFT page is currently overflowing beyond the first fold of the page. It also does not have the proper dimensions of margin relative to the edges of the page viewport and the header.

Fix the container dimensions to match the figma mockups

NFT Market: Collections v2 Design

Update the Collections page to match v2 designs.

The header does not need to collapse toggle. Keep it in expanded state.

Do not worry about data rendering or anything from the api that could be causing an issue. Just focus of layouts and use dummy data where needed.

NFT Market: Single Cards Display

NFT Display - Image attached below - Collected NFT gallery is displaying images in NFTs in various sizes. We need to ensure the gallery view follows a strict grid, and images are the same size.

The current state does not enforce consistency of img dimension: see below

Refer to the V2 designs to enforce a 190px by 190px. If the height exceeds 190, fill the width and let the image overflow down the y axis

NFT Market: Profile Tabs

Currently "Created" tab is not reading from collected

• Collected Tab should be changed to "Items"
• Render icons on NFT cards in the Items tab based on props that are driven by data returned from the web3 call to the users wallet

• Create a click event on each card that opens a modal and displays all data for the selected nft
• Use <NFTDetails mode="my-created-NFT" backUrl={backUrl} handleClickPrimaryButton={() => setVisible(true)} /> inside the modal. Currently, NFTDetails uses data from the NFTDetails Context but if a user creates an NFT that does not exist in our DB then there will be no id to fetch. This requires an optional data prop to be created where all of the nft data from the selected nft can be passed.
• The deatils modal should contain a button that relocates to the "Sell NFT" page.

Farming - Mobile Responsiveness

Farming page is currently not mobile responsive. Containers should collapse based on display size

Crypto-trading - Market Selector Drop-Down - Dropdown scrollbar on bottom should not be displayed

Description: Fix a display bug with the horizontal scroll bar showing up at the bottom of the market selector drop down on the crypto trading page.

Requirements:

• When a user clicks the market selector drop down, the drop down should show the available market pairs without the extra horizontal scroll bar on the bottom.
• The vertical scroll bar will need to be displayed still so the user can scroll up and down the market list.

Front End Work

Just to start @Jonathan-Multivurse:

• Implement Synth Main page
• Check Responsiveness/Bug Testing (by Oct 15)
• Will revert back regarding the NFT front end

Tool tip for the delta column - Synths

• Tooltip for representation of the delta values (@stunt101harm @antimatterrr please provide text for the tooltip)

Wallet connect requires an additional click

Usually, a DeFi app requires the user to connect the wallet which involves 2 clicks: the first click on the "connect wallet" button in the top right corner, the second click for choosing the wallet. e.g. https://www.orca.so/

However, this is not the case in our current app: we need three clicks. We might need to change the source code for the library we used for wallet connect to remove the additional click.

Enhance Display Grid Synths

• Add decimal places for higher priced assets
• Number of digits on left of decimal for asset price = Number of decimals needed to display for amount and delta (4 decimal places)
• Build logic around display decimals with higher prices

Utilize a single data source for displayed variables - Synths

We are currently doing separate calculations for the same variables on the synths display. So we wanted to do the calculations on the backend and use that single source for all of the display variables.

Farming: Table Pagination

Would be great that the table on Farming has pagination feature.

NFT Market: Sorts and Filters

• Create logic for filtering nfts within of a collection
• Create logic for filtering nfts within a user profile
• remove live auctions tab from collections

Mobile Responsiveness - Web App

Web app has to be more mobile friendly (www.app.goosefx.io)

See screenshots below for issues on iPhone 11 Pro:

Make sure any changes don't break the web, desktop, iPad responsiveness.

Farming: light mode support

Update farming page with light mode support as specified in the figma mockup.

NFT Display

Need to redesign NFT display view to make it better:

1. Make the top menu collapsible

2. Reduce the size/font of this header - it can be smaller box/text
   

NFT Market: Footer Carousel has wrong dimensions

The footer carousel on the NFT page needs proper dimensions to account for its parents width while keeping the controls visible.

Currently, its width exceeds the boundaries of the page and the controls to scroll left and right are pushed outside the bounds of the page making them not visible or clickable.

Implement styles so that the carousel fits within the boundaries of its container so the controls are visible and clickable.

Farming: Tooltip is missed

Farming - Improve collapse function

Currently, the farming pool details are only accessible by clicking the arrow. The pool details should collapse by clicking the whole row and not just the area containing the arrow.

GeoRestriction

There is georestriction enabled from amplify in AWS.

Currently it is a domain level restriction for app.goosefx.io/

We do NOT need it currently for NFT store: https://app.goosefx.io/NFTs

Restriction should not be domain level and should be unique and only enabled for Synths, Crypto Trading, and Farming.

NFT Market: Profile Page v2 Desgin

Update the user profile header to match v2 design. Update the "Items" tab to say "My Collection"

Do not include the "Lend Borrow" button

Main Nav: Navbar Height & Icon Dimensions

The navbar height is suppose to be 80px in height. Currently it is 96px

Additionally, the icons each have the incorrect height and width. Their heights should be 27px and their widths should be auto to prevent warping them.

The "Crypto" tab icon should be updated to match the latest comps

See screenshot below for correct outcome:

NFT Market: Transaction History

Make sure the the "Transaction History" tab is reading from the NFTDetailsProvider "bid" property which is an array of bids.

If the array is empty, display the caption with a button that allows the user to place a bid. When clicked, that button should open a modal and capture the bid info and make a post request.

Refer to the designs as needed - https://www.figma.com/file/n8hazf3L3NMHBuuDxlK7qt/GooseFx-UI%2FUX-Web-App?node-id=1737%3A2244

Swap: Build Home View

• Build a home page view for the /swap so that the user can see a way to connect their wallet
• https://app.zeplin.io/project/611a982fb2eaec11efff10d3/screen/612511d460e062a08706a1b3

Share collection and Global search features in light mode

Crypto-trading - Orderbook functionality - Clicking Amount column values should populate the order form

We want to enhance the order book functionality by allowing a user to click values in the amounts column and having those amounts prefill in the order form above.
Currently, clicking the price column values will auto populate the price in the order form. (that is the desired behavior for the amount column also)

Requirements:

• When a user clicks the amount value in the order book, that same value should prefill the order form.
• Clicking the amount column values, should not change the price value in the order form.
• Clicking the price column values, should not change the amount column values in the order form.

NFT Market: Home Page

Refer to the V2 layout for home page

Update the current home page layout to use NFT Marketplace (UI.UX) 2.0

The api for floor and volume have not been created so just use the current data being returned by /all-collections endpoint.

Use dummy data for price value but use title and profile_pic_link from returned data.

Crypto Trading Slider does not recalculate

input from user -
When I try to move slider to change the price, it doesn't recalculate. I have to click on "Total" field to recalculate correctly.

But if I click on "Size", "Limit Price", My "total" field and slider gets their previous position

NFT Market: Global Quicksearch

For the global search, use the data in allCollections within the collections context data source. This feature essentially will be a filter on all collections via the search input.

If focus is brought to the searchbar and there is no characters input, display an empty results box with "Start typing to search collections"

If there is one or more characters typed in the searchbar, fill in the results with a maximum of 5 collections.

If there are no results, display a message in the box that says "No results found"

See image below for reference. See Figma designs for more details as needed

NFT Market: Home Page Banner Expand/Collapse

The Home page of the NFT Market has a banner that defaults to being expanded but optionally has a button to collapse it. Currently that button is not active and the banner cannot collapse.

A toggle function needs to be attached to the chevron below the image to activate expand and collapse. The text and call-to-action button need to change their size and position for the collapsed state. See image below