Build fails after adding Charts

[ghost]

Hi all,

After following the steps in readme and have been adding the folders charting_library datafeeds to /src and /public i receive errors on building. What did i do wrong here ?

Failed to compile.

/Applications/XAMPP/xamppfiles/htdocs/serum-dex-ui/src/components/TradingView/index.tsx TypeScript error in /Applications/XAMPP/xamppfiles/htdocs/serum-dex-ui/src/components/TradingView/index.tsx(52,11): Property 'container' is missing in type '{ symbol: string; datafeed: any; interval: Nominal<string, "ResolutionString">; container_id: string | undefined; library_path: string; locale: "en"; disabled_features: string[]; ... 7 more ...; theme: "Dark"; }' but required in type 'ChartingLibraryWidgetOptions'. TS2741

50 | 
51 |   React.useEffect(() => {

52 | const widgetOptions: ChartingLibraryWidgetOptions = { | ^ 53 | symbol: findTVMarketFromAddress( 54 | market?.address.toBase58() || '', 55 | ) as string,

[pepeneif]

I have the same issue. I think it might have to do with the version of the Tradingview charting-library, but not 100% sure yet. If I find the answer, I will post it here. If you find the answer, please share it here.

[ghost]

Issue is in TradingView Chart charting_library.d.ts:

interface ChartingLibraryWidgetOption

remove container

but... the chart is still not displaying.. we're missing some key element here.

[pepeneif]

I will try with an older version of the Trading View charting_library, maybe that is the solution.

My delay is because the access to the Trading View charting_library is using my business partner github user and not mine, maybe you can try yourself?

Choose a charting_library version few months old to be sure.

To get an older version of any software in github click on "Comits" on the top right corner of the files list.

[ghost]

Let me try...

[ghost]

replaced with Release v18.044 (from c3634edc) … No diff, for some reason there is no return for <div id={defaultProps.containerId} className="tradingview-chart" />;

[ghost]

1. Download serum-dex-ui
2. Download Trading Charts
3. Copy charting_library folder from https://github.com/tradingview/charting_library/ to /public and to /src folders.
4. Copy datafeeds folder from https://github.com/tradingview/charting_library/ to /public.
5. Add import { TVChartContainer } from '../components/TradingView'; too TradePage.tsx
6. Removed "./src/components/TradingView/index.tsx" from tsconfig.json
7. Uncomment in public/index.html so script tags are enabled
8. Created a file .eslintignore -> src/charting_library/charting_library.esm.js and placed in root (together with .env.example)
9. Removed container variable from ChartingLibraryWidgetOptions

But no chart is being returned…. What am i missing here ?

[pepeneif]

You need to add some code to pages/TradePage.tsx

Inside the "const RenderNormal" definition

Something like this:

const RenderNormal = ({ onChangeOrderRef, onPrice, onSize }) => { return ( <Row style={{minHeight: '900px', flexWrap: 'nowrap', }}>

  <Col flex={'360px'} style={{ height: '100%' }}>
    <Orderbook smallScreen={false} onPrice={onPrice} onSize={onSize} />
    <TradesTable smallScreen={false} />
  </Col>

  <Col flex="auto" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
    <div style={{ height: '510px' }}><TVChartContainer /></div>
    <UserInfoTable />
  </Col>

  <Col flex="400px" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
    <TradeForm setChangeOrderRef={onChangeOrderRef} />
    <StandaloneBalancesDisplay />
  </Col>

</Row>

); };

But depending on your design, the order of the windows and sizes can vary.

[ghost]

That is already inside that file:

const RenderNormal = ({ onChangeOrderRef, onPrice, onSize }) => {
  return (
    <Row
      style={{
        minHeight: '900px',
        flexWrap: 'nowrap',
      }}
    >
      <Col flex="auto" style={{ height: '100%', display: 'flex' }}>
        <UserInfoTable />
      </Col>
      <Col flex={'360px'} style={{ height: '100%' }}>
        <Orderbook smallScreen={false} onPrice={onPrice} onSize={onSize} />
        <TradesTable smallScreen={false} />
      </Col>
      <Col
        flex="400px"
        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
      >
        <TradeForm setChangeOrderRef={onChangeOrderRef} />
        <StandaloneBalancesDisplay />
      </Col>
    </Row>
  );
};

[pepeneif]

But if you see, in the code that is already in the file, the TVChartContainer is missing.

[ghost]

But if you see, in the code that is already in the file, the TVChartContainer is missing.

? Can you explain this please.

[ghost]

you have to add it (Step 3 in README) import { TVChartContainer } from '../components/TradingView';

manually in TradePage.tsx

[pepeneif]

yes, you need to import TVChartContainer , as it is indicated in the instructions.

But then,

you also have to include that container somewhere in the rendering of the page.

In the code I sent to you it will show between the TradesTable and the TradeForm, on top of UserInfoTable

In that page you can change the arranging of the windows shown.

[ghost]

yeah thats why the compiler now returnss:

Compiled with warnings.

./src/pages/TradePage.tsx Line 28:10: 'TVChartContainer' is defined but never used @typescript-eslint/no-unused-vars

let me check you last comment and get back to you.

[ghost]

Aah that is a pretty important part i was missing... changed and now.

Compiled with warnings.

./src/components/TradingView/index.tsx Line 96:6: React Hook React.useEffect has missing dependencies: 'defaultProps.autosize', 'defaultProps.clientId', 'defaultProps.containerId', 'defaultProps.datafeedUrl', 'defaultProps.fullscreen', 'defaultProps.interval', 'defaultProps.libraryPath', 'defaultProps.studiesOverrides', and 'defaultProps.userId'. Either include them or remove the dependency array react-hooks/exhaustive-deps

[pepeneif]

and do you see the chart now?

[ghost]

Yes it is showing now ! Not the right dimensions or chart data but we're one step further ! i'll check if it works with the latests trading view chart aswell.

[pepeneif]

Great!

The dimensions are changed in the <div style={{ height: '510px' ... next to the tag as per the JS/React flex display instructions.

I have the same problem about the chart data and I was thinking it was the charting_library version.

If you find the solution, please share it?

[ghost]

sure! thnx pepeneif

[ghost]

it is a CORS issue..

[pepeneif]

Wow. Thanks for letting me know!!

[LeRoYGo]

I did what you wrote here and got this

[pepeneif]

Maybe you forgot step number 8 of the list given by wcrama ?

8. Created a file .eslintignore -> and placed in root (together with .env.example)

it means that you have to create a file called ".eslintignore", with "src/charting_library/charting_library.esm.js" as its content.

[LeRoYGo]

Like this?

[pepeneif]

yes

[ghost]

Wow. Thanks for letting me know!!

change -> export const BONFIDA_DATA_FEED inside bonfidaConnector This will make the chart work ! bonfida api does not work atm

[ghost]

Like this?

add these 2 lines src/charting_library/charting_library.esm.js src/components/TradingView/index.tsx

[ghost]

otherwise try older versions of tradingview from commits in github

[pepeneif]

Which version of the charting_library worked for you wcrama ?

[ghost]

Commits on May 26, 2021 Release v18.044 (from c3634edc) …

[pepeneif]

Great, thanks!

[ghost]

i also have added this line in charting_library.esm.js / eslint-disable no-unused-expressions /

[LeRoYGo]

I did as written here, but the graphs are not displayed. The terminal says the following: `Compiled with warnings.

./src/charting_library/charting_library.esm.js Line 102:70: Unexpected use of comma operator no-sequences Line 137:65: Unexpected use of comma operator no-sequences Line 204:59: Unexpected use of comma operator no-sequences Line 317:24: Unexpected use of comma operator no-sequences Line 321:63: Unexpected use of comma operator no-sequences Line 326:49: Unexpected use of comma operator no-sequences Line 375:72: Unexpected use of comma operator no-sequences Line 479:48: Unexpected use of comma operator no-sequences

./src/components/TradingView/index.tsx Line 96:6: React Hook React.useEffect has missing dependencies: 'defaultProps.autosize', 'defaultProps.clientId', 'defaultProps.containerId', 'defaultProps.datafeedUrl', 'defaultProps.fullscreen', 'defaultProps.interval', 'defaultProps.libraryPath', 'defaultProps.studiesOverrides', and 'defaultProps.userId'. Either include them or remove the dependency array react-hooks/exhaustive-deps`

[LeRoYGo]

Hurrah, the diagram is working, but there are two problems: 1) The selected trading pair is different from the pair in the chart. If you change the pair in DEX on the diagram does not change. 2) How to make diagrams in height more. The method above does not work.

[ghost]

Good work ! Would you like to share how you managed ?

[dahifi]

I was able to setup new instance using most recent serum and TV library, just need to add the /* eslint-disable no-unused-expressions */ in front of ./src/charting_library/charting_library.esm.js.

[DefiDax]

can anyone send me the charting_library please or a link to find it? thanks

[DefiDax]

I was able to setup new instance using most recent serum and TV library, just need to add the /* eslint-disable no-unused-expressions */ in front of ./src/charting_library/charting_library.esm.js.

Hi could you send me a copy of the charting library please??

[DefiDax]

Good work ! Would you like to share how you managed ?

can anyone send me the charting_library please or a link to find it? Been driving me mad last 2 weeks and cant find it nowhere thanks.. email cryptoc1980@gmail.com

[interbiznw]

Good work ! Would you like to share how you managed ?

can anyone send me the charting_library please or a link to find it? Been driving me mad last 2 weeks and cant find it nowhere thanks.. email cryptoc1980@gmail.com

Read the instructions, you need to request access from tradingview directly

[BunnyNomics101]

Good work ! Would you like to share how you managed ?

scrams would care to share with us how you got amstadex working? We could compensate: Bunnynomics101@gmail.com

[interbiznw]

Good work ! Would you like to share how you managed ?

scrams would care to share with us how you got amstadex working? We could compensate: Bunnynomics101@gmail.com

You need help?

[ghost]

Not sure if anyone still need help but I'm happy to assist !

[BunnyNomics101]

Did you ever get pass the "Error placing order Transaction failed: Instruction: InitializeAccount" when placing orders?

[Prazovic]

change -> export const BONFIDA_DATA_FEED inside bonfidaConnector

Hi Bro, change to what? The original version: export const BONFIDA_DATA_FEED = 'https://serum-api.bonfida.com/tv'; Thank you for your help!

[rapitex]

Hi every one In my case solved by adding this comment to top ===/ eslint-disable / ==== of esm.js file in charting library and also changing the file construct by using baeutify contetnt extension in IDE.