Giter Club home page Giter Club logo

mango-ui-v3's Introduction

Mango UI V3

Uses:

Running the UI locally

  1. Install Node.js and npm (https://nodejs.org/en/download/), and Git (https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
  2. Open a new terminal window (if running Windows use Git Bash) and run npm install -g yarn
  3. Run git clone https://github.com/blockworks-foundation/mango-ui-v3.git && cd mango-ui-v3 to get the UI source code
  4. Run yarn install to install dependencies
  5. Run yarn dev to start the webserver
  6. Navigate to http://localhost:3000 in your browser

Branches

  • production is deployed to trade.mango.markets and app.mango.markets
  • main is deployed to alpha.mango.markets
  • devnet is deployed to devnet.mango.markets

mango-ui-v3's People

Contributors

abacus-x avatar abrzezinski94 avatar amper-fb avatar dafyddd avatar dboures avatar etsploit avatar impossiblepairs avatar jackson-sandland avatar josh-web3-dev avatar jpmti2016 avatar kierangillen avatar l2succes avatar lagzda avatar mfenn avatar microwavedcola1 avatar mschneider avatar nicholasgodfreyclarke avatar riordanp avatar rjpeterson avatar saml33 avatar silas-x avatar stevesarmiento avatar tarcisiozf avatar taycaldwell avatar thedefibat avatar tlrjs avatar vidorge avatar vsakos avatar waterquarks avatar yakovbyakov 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

mango-ui-v3's Issues

Issues placing orders when running locally and getting error

Error: Trade history incomplete
    getAverageOpenPrice PerpAccount.js:81
    collectPerpPosition usePerpPositions.tsx:49
    perpAccounts usePerpPositions.tsx:97
    usePerpPositions usePerpPositions.tsx:96
    UserInfoTabs UserInfo.tsx:26
    React 9
    unstable_runWithPriority scheduler.development.js:468
    React 5
    listener index.js:79
    setState index.js:11
    setState index.js:11
    set useMangoStore.tsx:243
    _callee$/< useMangoStore.tsx:306
    promise callback*_callee$ useMangoStore.tsx:298
    Babel 8
    _callee$ useWallet.tsx:122
    Babel 8
    _handleConnect phantom.ts:43
    emit inpage.js:116
    _handleMessage inpage.js:288
    a inpage.js:288
    a inpage.js:288
    _handleMessage inpage.js:288
 
UserInfoTabs@webpack-internal:///./components/UserInfo.tsx:44:21
div
UserInfo@webpack-internal:///./components/UserInfo.tsx:163:89
div
FloatingElement@webpack-internal:///./components/FloatingElement.tsx:23:21
div
Resizable@webpack-internal:///./node_modules/react-resizable/build/Resizable.js:46:35
DraggableCore@webpack-internal:///./node_modules/react-draggable/build/cjs/DraggableCore.js:130:20
GridItem@webpack-internal:///./node_modules/react-grid-layout/build/GridItem.js:65:20
div
ReactGridLayout@webpack-internal:///./node_modules/react-grid-layout/build/ReactGridLayout.js:98:20
ResponsiveReactGridLayout@webpack-internal:///./node_modules/react-grid-layout/build/ResponsiveReactGridLayout.js:144:20
WidthProvider@webpack-internal:///./node_modules/react-grid-layout/build/components/WidthProvider.js:77:22
TradePageGrid@webpack-internal:///./components/TradePageGrid.tsx:396:86
div
PageBodyWrapper@webpack-internal:///./components/styles.tsx:71:20
div
PerpMarket@webpack-internal:///./pages/market.tsx:76:101
div
ViewportProvider@webpack-internal:///./hooks/useViewport.tsx:18:20
f@webpack-internal:///./node_modules/next-themes/dist/index.modern.js:10:242
App@webpack-internal:///./pages/_app.tsx:129:21
I18nextProvider@webpack-internal:///./node_modules/react-i18next/dist/es/I18nextProvider.js:11:14
AppWithTranslation@webpack-internal:///./node_modules/next-i18next/dist/esm/appWithTranslation.js:37:24
StyleRegistry@webpack-internal:///./node_modules/styled-jsx/dist/stylesheet-registry.js:231:28
ErrorBoundary@webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47
ReactDevOverlay@webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:20
Container@webpack-internal:///./node_modules/next/dist/client/index.js:330:24
AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:770:20
Root@webpack-internal:///./node_modules/next/dist/client/index.js:888:21

This events has length 0 then it goes directly to the error.
image

image

The events is this tradeHistory that's 0 length. Don't know how it would get values. Don't know why/if trade history is necessary.
image

When trying to place an order it gets stuck in this infinite loop trying to call this
image

Documentation on API Backends?

Is there any documentation on the backend this uses? Specifically the heroku app for stats? I'm curious to understand how latest funding rates are calculated and where oracle prices come from.

How to solve this error?

Unhandled Runtime Error
Error: failed to get recent blockhash: Error: 403 : {"jsonrpc":"2.0","error":{"code": 403, "message":"Access forbidden, contact your app developer or [email protected]."}, "id": "e37da218-91e7-4020-a2b4-b8e05d1be464" }

Call Stack
Connection.getRecentBlockhash
node_modules/@solana/web3.js/lib/index.browser.esm.js (6519:0)

Market price not displayed in the browser tab title anymore

The price fetching into the tab title doesn't seem to work anymore.. It's a super convenient feature!
I gather the issue is here but i'm not super familiar with how the state is represented... could someone take a look ? :)
@

const marketTitleString =
marketConfig && router.pathname.includes('[market]')
? `${
oraclePrice
? oraclePrice.toFixed(getDecimalCount(market?.tickSize)) + ' | '
: ''
}${selectedMarketName} - `
: ''

Javascript heap out of memory

Guys, I have a problem, when try to start your interface locally.
When I try to run dev process on 'account' route, or on base route and then go to account route - dev process is crashing with error heap out of memory.
OS ubuntu 20.04. 8GB DDR4 + 10 GB swap
Screenshot from 2022-05-25 09-30-11

Swap Page Improvements

It's pretty cool that we have the ability to swap any token on the Mango UI now, but I think the page is a bit sparse and unintuitive for new users. For example, as a new user, I don't immediately know why I should use this on Mango instead of just going to Orca/Raydium/Serum. My first thought is: oh look Mango has a swap thing that's probably just a worse version of some other project that focuses on that exclusively.

@saml33 Can you work on making this a bit more intuitive to use? Maybe, some kind of info to signal that the Swap feature is strictly better than going elsewhere. If you think it's already perfect please say so!

How do I change the default theme?

How do I make the default design theme "Dark" instead of "Mango"? In which file should I change the code?And is it also possible to remove the Mango theme from the app?

General UI Criticism

  1. I think the switch icon with the double arrows is not very intuitive and fast. For one, the spot markets are first but they're not necessarily the most popular markets (with the exception of one person market making the SOLUSDC). I think it would be cleaner if it was sorted by 24 hour perp volume and the spot markets placed below the perp markets with the same ordering (I understand we don't have an easy way to query spot volumes). I think the switch icon itself is not an inuitive symbol. I didn't know that I could use it to switch between markets. Maybe a dropdown symbol would be more intuitive? Maybe if the market name (e..g SOL-PERP) itself can be clicked to bring about the drop down? I don't know.

  2. The yellow connect wallet in the top right is way too bright when using the Mango theme. It's more acceptalbe in dark theme. Can we tone it down a bit?

New Account Page Issues

I really like the new Account page deployed in https://alpha.mango.markets/account

I'm going to use this Issue to list all minor bugs

  1. When you hit Claim Rewards in the top right, it doesn't update the value after tx is successful
  2. It's a bit confusing that this says pnl (24 hours) but is actually showing total lifetime pnl. Also pnl on the left is showing total pnl including spot. Maybe naming will help here?
    image

GenesysGo auth

Hey team!

Would you be interested in my help to put together the GenesysGo auth (I just noticed that you removed it)?

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.