Initializing SDK in React Project

[tainnhan]

Hi,

I create a new fresh react project and I wanted to initialize the sdk with:

 npx create-react-app test --template typescript 
 npm i @loopring-web/loopring-sdk --save

I used node version v18.18.1

I used the following code into my app.tsx.

import { UserAPI, ExchangeAPI, AmmpoolAPI, DelegateAPI, GlobalAPI, NFTAPI, WalletAPI, WsAPI, ChainId } from '@loopring-web/loopring-sdk';
export class LoopringAPIClass {
  public static userAPI: UserAPI;
  public static exchangeAPI: ExchangeAPI;
  public static ammpoolAPI: AmmpoolAPI;
  public static walletAPI: WalletAPI;
  public static wsAPI: WsAPI;
  public static nftAPI: NFTAPI;
  public static delegate: DelegateAPI;
  public static globalAPI: GlobalAPI;
  //public static contractAPI: typeof ContractAPI; #btw I didn't found any import so I commented it
  public static __chainId__: ChainId;
  public static InitApi = (chainId: ChainId) => {
    LoopringAPIClass.userAPI = new UserAPI({ chainId });
    LoopringAPIClass.exchangeAPI = new ExchangeAPI({ chainId });
    LoopringAPIClass.globalAPI = new GlobalAPI({ chainId });
    LoopringAPIClass.ammpoolAPI = new AmmpoolAPI({ chainId });
    LoopringAPIClass.walletAPI = new WalletAPI({ chainId });
    LoopringAPIClass.wsAPI = new WsAPI({ chainId });
    LoopringAPIClass.nftAPI = new NFTAPI({ chainId });
    LoopringAPIClass.delegate = new DelegateAPI({ chainId });
    LoopringAPIClass.__chainId__ = chainId;
    //LoopringAPI.contractAPI = ContractAPI; #btw I didn't found any import so I commented it
  };
}
/* env:
 * test:  sdk.ChainId.GOERLI 
 * eth:  sdk.ChainId.MAINNET 
 */
LoopringAPIClass.InitApi(5); 

When running

npm run build

I get many errors that looks like this:

Module not found: Error: Can't resolve 'assert' in '/Users/******/Desktop/hello/node_modules/ethereumjs-util/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

Can someone help me ?

[codingdani]

same issue here

[codingdani]

try to run the command in your root folder of the project

npm install assert stream

[tainnhan]

Thank you. That resolves my errors but I get new error:

ERROR
Buffer is not defined
ReferenceError: Buffer is not defined
    at ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/secp256k1v3-lib/der.js (http://localhost:3000/static/js/bundle.js:45787:40)
    at options.factory (http://localhost:3000/static/js/bundle.js:133916:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:133334:33)
    at fn (http://localhost:3000/static/js/bundle.js:133573:21)
    at ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/secp256k1v3-adapter.js (http://localhost:3000/static/js/bundle.js:45476:11)
    at options.factory (http://localhost:3000/static/js/bundle.js:133916:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:133334:33)
    at fn (http://localhost:3000/static/js/bundle.js:133573:21)
    at ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/index.js (http://localhost:3000/static/js/bundle.js:45311:17)
    at options.factory (http://localhost:3000/static/js/bundle.js:133916:31)

[willsmillie]

@saleos97 you can do the same for that error, 'npm install buffer'

You can take a look at a template I made here, specially for the webpack config-overrides.js:

https://github.com/willsmillie/Loopring-token-gate-react-example

[codingdani]

i have that buffer error too although i ran this command

npm install buffer

I changed the webpack.config.js to config-overrides.js with this code:

const webpack = require("webpack");

module.exports = function override(config) {
  config.resolve.fallback = {
    // process: require.resolve('process/browser'),
    // zlib: require.resolve('browserify-zlib'),
    stream: require.resolve("stream-browserify"),
    // util: require.resolve('util'),
    buffer: require.resolve("buffer"),
    asset: require.resolve("assert"),
  };

  config.plugins.push(
    new webpack.ProvidePlugin({
      // process: 'process/browser.js',
      Buffer: ["buffer", "Buffer"],
    })
  );

  return config;
};

this here is my package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@loopring-web/loopring-sdk": "^3.6.14",
    "@loopring-web/web3-provider": "^1.4.13",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^18.18.2",
    "@types/react": "^18.2.28",
    "@types/react-dom": "^18.2.13",
    "assert": "^2.1.0",
    "buffer": "^6.0.3",
    "cipher-base": "^1.0.4",
    "keccak": "^3.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "stream": "^0.0.2",
    "stream-browserify": "^3.0.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "webpack": "^5.89.0"
  }
}

and i just want to run this code here in App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { UserAPI } from "@loopring-web/loopring-sdk";

function App() {
  const CHAIN_ID = 5;
  const userAPI = new UserAPI({ chainId: CHAIN_ID });
  console.log(userAPI);
  return <div className="App"></div>;
};

export default App;

@willsmillie we also start a typescript project not pure js

[willsmillie]

@codingdani in order to modify CRA's default web pack config (via the config-overrides.js) you need to use react-app-rewired npm install react-app-rewired --save-dev

and change your react-scripts in your package.json to:

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",

[codingdani]

@willsmillie thanks! but now it throws multipe errors in the console in vscode of this kind

WARNING in ./node_modules/ethereumjs-abi/node_modules/ethereumjs-util/dist/signature.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Desktop/reactapp/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/src/signature.ts' file: Error: ENOENT: no such file or directory, open '/Desktop/reactapp/node_modules/ethereumjs-abi/node_modules/ethereumjs-util/src/signature.ts'