openware / baseapp

OpenDAX Trading user interface

Guide | API Docs | Consulting | Community

Component part of OpenDAX Trading Platform

---

OpenDAX BaseApp UI

User Interface for Trading and Wallets Management

React application to build a trading platform interface for use with OpenDAX: https://github.com/openware/opendax

You can see an example of a live application running at: https://www.openfinex.io/ If you need customization from the experts contact us: https://www.openware.com/

License

Please note, that BaseApp license only allows Non-Commercial use of this component. To purchase the Commercial license, please contact us at [email protected].

Install dependencies

$ yarn install

Run in developement mode

$ yarn start-mock

This command will also start a fake api backend for helping development. Once you happy with the result, save, build an image and run it with OpenDAX docker compose system.

Execute tests

In <rootDir>

$ yarn test

Check test coverage:

$ yarn test -- --coverage --watchAll

For more options for jest run yarn test --help.

Configuration documentation

Configuration file is located in public/config/env.js

Argument	Description
api	URLs of barong, peatio, applogic and ranger API endpoints. You can use mockserver (https://github.com/openware/mockserver) with default env.js values
minutesUntilAutoLogout	Autologout time in minutes
withCredentials	false or true if you want to include cookies as part of the request(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials)
gaTrackerKey	Google Analytics tracker key
rangerReconnectPeriod	Reconnection time for the Ranger WS service in minutes
msAlertDisplayTime	Alert message display duration in milliseconds
kycSteps	List of label names for KYC process

Available Docker build args

While building a Docker image you can pass build-dependant arguments using --build-arg: docker build -t baseapp:latest --build-arg BUILD_DOMAIN="example.com" .

Argument	Description
BUILD_EXPIRE	Unix Timestamp of the build expiration date in seconds
BUILD_DOMAIN	Domain which you'd like to use during the deployment

Build mobile app

Install dependencies using npm. Important for mobile app development.

npm install

Build frontend

yarn build

Generate a native project (ios, android)

ionic capacitor add <platform>

To build a native app you should have Xcode or Android studio on your local machine.

Build IOS app

1. Install Xcode

Xcode is the IDE for creating native iOS apps. It includes the iOS SDK and Xcode command-line tools. Xcode can be downloaded for free with an Apple account or it can be installed through the App Store. Once Xcode is installed, make sure the command-line tools are selected for use:

xcode-select --install

2. Set up a development team

All iOS apps must be code signed, even for development. Luckily, Xcode makes this easy with automatic code signing. The only prerequisite is an Apple ID.

Open Xcode and navigate to Xcode » Preferences » Accounts. Add an Apple ID if none are listed. Once logged in, a Personal Team will appear in the team list of the Apple ID.

3. Create an iOS Simulator

You can test your mobile application with a connected Iphone device to the Mac or using IOS Simulator. Open Xcode and navigate to Window » Devices and Simulators. Create an iPhone 11 simulator if one does not already exist.

4. Set configs

Open the capacitor.config.json file and modify the appId property.

Put the name of BE server:

  "server": {
    "hostname": "example.openware.work"
  }

5. Open the project in Xcode.

Launch Xcode with a prepared app:

ionic capacitor run ios

6. Check Xcode configuration In Project navigator, select the project root to open the project editor. Under the Identity section, verify that the Package ID that was set matches the Bundle Identifier.

In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.

7. Update native app with the changes

With each meaningful change, Ionic apps must be built into web assets before the change can appear on iOS simulators and devices. The web assets then must be copied into the native project:

ionic capacitor copy ios

8. Build IOS app

To receive an executable app file run 'build' command on Xcode. You need to have an Apple Developer account to be able to extract an executable file from Xcode.

Build Android app

1. Install Android studio

Android Studio is IDE, that provides the fastest tools for building apps on every type of Android device.

2. Open the capacitor.config.json file and modify the linuxAndroidStudioPath property.

Run next command

whereis android-studio

3. Build your android application

ionic capacitor add android

4. Launch android application with Android Studio

ionic capacitor run android

5. Android Studio configuration

Select connected android device or configure device simulator, which required

6. Update app with the changes

ionic capacitor copy android [options]

7. Set ANDROID_SDK_ROOT variale

Set android ask path to ANDROID_SDK_ROOT or write sdk.dir variable in android/local.properties file (it doesn't exist as a default)

8. Build android app

Build android app using Android Studio Build tab

or you can build apk file with command line

Debug build:

  ionic capacitor copy android && cd android && ./gradlew assembleDebug && cd ..

Release build:

For release build you have to create keystore path and keystore alias and run next command:

  cd android &&
  ./gradlew assembleRelease &&
  cd app/build/outputs/apk/release &&
  jarsigner -keystore YOUR_KEYSTORE_PATH -storepass YOUR_KEYSTORE_PASS app-release-unsigned.apk YOUR_KEYSTORE_ALIAS &&
  zipalign 4 app-release-unsigned.apk app-release.apk

Happy trading with OpenDAX BaseApp UI

If you have designed something beautiful with it, we would love to see it!

And if you have any comments, feedback and suggestions - we are happy to hear from you here at GitHub or at https://openware.com

Licensing

This code is open for helping private modification and performing customer demonstration, you can use it for raising capital. You cannot use it for a live platform without getting a commercial license from us.

Contact us if you'd like to purchase a commercial license.

Partners

If you would like to fork, and modify this UI to create a BaseApp theme, we would be happy to setup a partnership program and sell your work provided a revenue sharing.

Made with love from Paris and Kiev.

baseapp's Issues

New Baseapp (master) does not support postgresql even though opendax supports it

Hi,

I suppose baseapp has not supported postgresql yet

[Kaigara] 2021/10/18 02:02:06 KAIGARA_REDIS_URL unset, do not connect to redis
[Kaigara] 2021/10/18 02:02:06 Starting command: ./bin/sonic [serve]
[Kaigara] 2021/10/18 02:02:06 Publishing on log.sonic.stdout and log.sonic.stderr
[Kaigara] 2021/10/18 02:02:06 Reached EOF on STDIN
[mysql] 2021/10/18 02:03:06 packets.go:36: unexpected EOF
[mysql] 2021/10/18 02:04:06 packets.go:36: unexpected EOF
[mysql] 2021/10/18 02:05:06 packets.go:36: unexpected EOF
2021/10/18 02:05:06 driver: bad connection

2021/10/18 02:05:06 /go/pkg/mod/github.com/openware/pkg/[email protected]/database.go:37
[error] failed to initialize database, got error driver: bad connection
[Kaigara] 2021/10/18 02:05:06 exit status 1

I use postgres but baseapp displays only mysql

Create etalon component's test coverage

• handle click
• reveal skipped tests

MFA code is not visible on the mobile screen

Call API post /identity/sessions stuck

When I try to login in it gets stuck. I traced and there is no error but when the frontend makes the call to /identity/sessions api it jumps into the next call /users/me without waiting for the login response.

Link does not work

This link in the README.md file is not working.

https://github.com/openware/mockserver

Landing page always routes to trading page

(Master)

The landing page automatically routes to the trading page regardless of the config set in env.js

Temporary workaround:

baseapp/src/routes/Layout/index.tsx

• Revert (Line 193) {showLanding() && <Route exact={true} path="/" component={LandingScreen} />} back to <Route exact={true} path="/" component={LandingScreen} />

route not found 404

I am getting this error

Route not found 404

can anyone help me, how can i fix it.

Hello, I want to add new links to the site

Hello, I want to add new links to the site. Can you help me with this?

UI blocks arrange and resize

Hi ,
How can I arrange blocks and resize it ?

Edit css file in baseapp

hi guys
1- in the project where is the main css file to edit ? forexample to change the style to rtl
2- where is the html file ? i wanna change some text but i dont find the html source

thanks for guide
Alex

route not found 404

my app.yml images, When I try other images it won't even compile. This works but gives error as below And on the home page it says route not fund.

images:
  peatio: quay.io/openware/peatio:2.3.55
  barong: quay.io/openware/barong:2.3.47
  frontend: 3cf325445575
 # frontend: quay.io/openware/baseapp:2.3.26 # Check on quay.io/openware/baseapp for latest tags
  tower: quay.io/openware/tower:2.3.137
  postmaster: quay.io/openware/postmaster:2.3.5

www.domain.com/:1 Error in event handler: TypeError: Cannot read property 'notice_1' of undefined at parseMessage (chrome-extension://dbfipcjecamggjfabeaclacjoohfjhhn/js/content/content.js:8886:51) /api/v2/barong/identity/configs:1 Failed to load resource: the server responded with a status of 404 () /api/v2/barong/resource/users/me:1 Failed to load resource: the server responded with a status of 401 ()

Rename usernameEnabled to nicknameEnabled

baseapp/web/src/api/types.ts

Line 19 in 214975f

usernameEnabled: string | boolean;

BUG: 2.5.5 Profile/Address verification doesn't accept non-numeric/alphanumeric postal codes

The regex could be expended to allow number and letters as many countries use a combination of both not just all numbers.

https://github.com/openware/baseapp/blob/master/src/containers/Confirm/Identity/index.tsx#L382-L385

https://github.com/openware/baseapp/blob/master/src/containers/Confirm/Address/index.tsx#L237-L240

I tried changing the regex but didn't seem to make a difference:

•            const postcodeRegex = new RegExp(`^[0-9]{1,12}$`);
  

•            const postcodeRegex = new RegExp(`^[a-zA-Z0-9]{1,12}$`);
  

How to disable the mail and pin confirmation when I add new address to withdraw?

I cannot find the option to disable the PIN confirmation with mail when I add new address to withdraw a coin.
Anyone know how can I disable this option to make it easier to add a new addresses to withdraw?

Dialog improvements

Currently, it opens/closes with state flag within a component.
Disadvantages:

• need to create additional flag in redux store to handle case the form successfully submitted, subscribe it and if it true - close the dialog. This hack makes app complicated and increases possibility to get a but.
• dialog can be opened/closed only from specific component by subscribing state flag

To resolve above need to move opeding/closing to redux action.
Example here - a0a1bae#diff-731b906bcd8593e0a5402f1657db9a50bc9066ce8bbd3b37c7760071098e6fb8R12

miss click

Should update a license.

Opensource live baseapp have a license. GPL/MIT anyone what openware prefer or may be UNLICENSED.
***This is very important.

Unable to compile because of github.com/openware/sonic

Trying to run "docker build" fails with "github.com/openware/sonic invalid version: unknown revision 2c220ea19081" going to their page you can indeed confirm that commit with id 2c220ea19081 doesn't exist. (What's worse is that they even have link to this non existing commit in skel/go.mod)

2.6 getting error WEBPACK_IMPORTED_MODULE_12__.colors[colorTheme] is undefined

i run yarn install and after run
yarn start-mock

and try to open in browser i see this error please someone help me

TypeError: constants__WEBPACK_IMPORTED_MODULE_12_.colors[colorTheme] is undefined
OrderBookContainer/_this.orderBook
src/containers/OrderBook/index.tsx:138

135 | maxVolume={calcMaxVolume(bids, asks)}
136 | orderBookEntryAsks={accumulateVolume(asks)}
137 | orderBookEntryBids={accumulateVolume(bids)}

138 | rowBackgroundColorAsks={colors[colorTheme].orderBook.asks}
| ^ 139 | rowBackgroundColorBids={colors[colorTheme].orderBook.bids}
140 | dataAsks={this.renderOrderBook(asksData, 'asks', this.props.intl.formatMessage({id: 'page.noDataToShow'}), currentMarket)}
141 | dataBids={this.renderOrderBook(bids, 'bids', this.props.intl.formatMessage({id: 'page.noDataToShow'}), currentMarket)}

render
src/containers/OrderBook/index.tsx:118

115 | <div className={'cr-table-header__content'}>
116 | {this.props.intl.formatMessage({id: 'page.body.trade.orderbook'})}
117 |

118 | {orderBookLoading ?

: this.orderBook(bids, asks)}
| ^ 119 |
120 | );
121 | }

Frontend not showing up

Installing a fresh new opendax on Debian 9, ruby 2.6.5.

installing docker and docker-compose
installing ruby rvm
clone opendax
install bundler
bundle install
rake service:all[start]

and all services are up, no error

but when opening frontend in browser by typing the domain configured in config/app.yaml, I see the following error in the console and nothing is displayed but a blank page with gray background.

main.d2e6ef35.js:1 Uncaught ReferenceError: data is not defined
at main.d2e6ef35.js:1
at _0x50e05e (main.d2e6ef35.js:1)
at _0x474aea (main.d2e6ef35.js:1)
at main.d2e6ef35.js:1
at main.d2e6ef35.js:1

PM2 for run baseapp production

is their any app.js or others file thus it can use for PM2 for run baseapp production?
https://pm2.keymetrics.io/

401 unauthorized

Hi
I'm running baseapp 2.4.0 and opendax and everything it's ok, but I can see that app throws an errror

wss://domain.com/api/v2/rango/private/?stream=deposit_address&stream=ethusdt.ob-inc&stream=ethusdt.trades&stream=global.tickers&stream=order&stream=trade
401 UNAUTHORIZED

I'm trying to figure out what happends, but I can't find the error

I can sign in ok and when I'm signin, baseapp throws me this error

Any advice to resolve this problem?

---

peatio: quay.io/openware/peatio:2.4.19
barong: quay.io/openware/barong:2.4.12
frontend: custom/frontend:2.4.0
tower: quay.io/openware/tower:2.4.9
rango: custom/rango:2.4.0

Thanks

Type of License?

Hi guys,

Thanks a lot for sharing. Finally we can take a look into the code legally but we would like to be clear of the type of license included in this repo? is it MIT licensed? please let us know.

rangerSaga.ts

I am getting this error
(171,13): Type 'Channel' is not assignable to type 'Channel<{}>'.
Type 'unknown' is not assignable to type '{}'.

anyone have same issue?

Remove mockserver reference from readme

https://github.com/openware/mockserver repository seems to be no longer available, please remove it from readme

Style sheets

Hello,
Im trying to find the styles sheet to manipulate the font and size and images for the following items:

e.g. page.body.landing.features.features.item1.title in src/translations/en.ts

I have been unable to find the relevant file. Is there any documentation for this? If not can someone who has done this before perhaps point me in the right direction? Thanks.

tslint => eslint migration

• remove tslint ignore stuff: // tslint:
• apply eslint rules to all source code

KYC Verification last step fail (Fog)

I want to report the KYC verification related issue. The third and final document step fails. barong ver. 2.4.1.

Docker logs for barong:

[fog][DEPRECATION] Fog::Storage::AWS is deprecated, please use Fog::AWS::Storage.
[fog][WARNING] Unrecognized arguments: aws_signature_version, aws_access_key_id, aws_secret_access_key, region, endpoint, path_style
[DEPRECATION] Passing a options hash and a block to desc is deprecated. Move all hash options to block.
[DEPRECATION] Passing a options hash and a block to desc is deprecated. Move all hash options to block.
[DEPRECATION] Passing a options hash and a block to desc is deprecated. Move all hash options to block.
[DEPRECATION] Passing a options hash and a block to desc is deprecated. Move all hash options to block.

No longer works

Following the updates of OpenDax on March 27 2020, this frontend no longer works and instead results in a blank page.

About .../src/helpers/layout.ts

Hi, am teaching baseapp project and i have a question) is there an easier way to set the order of components than setting coordinates in .../src/helpers/layout.ts, I mean, can I somehow get the configuration after drag and drop or another way? Thank you in advance for your response.

BUG: referral code not saved on new registrations

Hi,

Peatio: 2.6.29
Barong: 2.6.31

It seems when a new users arrives from a referral link, the referral code is not added to the user->referral_id field.

Thanks

How to let user deposit and withdraw only after Email address verification?

I want users to be able to deposit and withdraw after level 1 - Email verification.

Add geetest captcha to the "react components"

Idea:
create isolate component for geetest captcha

Add mini market charts for landing

like an example

Twillo Phone verification issue.

Docker logs for Barong:

{"level":"ERROR","time":"2020-06-07 21:34:41 +0000","message":"Twilio Client Error: [HTTP 400] 21608 : Unable to create record\nThe number is unverified. Trial accounts cannot send messages to unverified numbers; verify at twilio.com/user/account/phone-numbers/verified, or purchase a Twilio number to send messages to unverified numbers.\nhttps://www.twilio.com/docs/errors/21608\n\n"}
{"level":"FATAL","time":"2020-06-07 21:34:41 +0000","message":" "}
{"level":"FATAL","time":"2020-06-07 21:34:41 +0000","message":"TypeError (no implicit conversion of nil into String):"}
{"level":"FATAL","time":"2020-06-07 21:34:41 +0000","message":" "}
{"level":"FATAL","time":"2020-06-07 21:34:41 +0000","message":"app/api/v2/resource/utils.rb:27:in +'\napp/api/v2/resource/utils.rb:27:in twilio_dictionary_error'\napp/api/v2/resource/phones.rb:8:in `block in class:Phones'"}

Redo geetest.js

It has issues with using raw javascript and window object.

How to change the background color of chart?

Hello,

I am trying to change the background color of chart to black rgb(0,0,0), but I didn't understand where to update the background color.

Expired modal window

AS A USER without activity i will get a modal window with message, that my session is expired. I closed a window and again went away from the platform. When i check it again i got again this modal window as a LOGGED OUT user with alerts with errors (because as a logged out user i can't destroy any session)

Cancel order

In web version, when there are more than one orders opened, when you cancel one of the orders dialog does not refresh.

I have noticed that if you create order and cancel it without leaving the page - everything works good.

But if you visit, for example, a profile page or wallets and then try to cancel the order - the issue appears.

BaseApp version 2.6.24 does not send a pin code

BaseApp version 2.6.24 does not send a pin code to an email address when confirming an account for withdrawal. The post office works for sure and sends other letters. What could be the reason?

How to let user "Complete your profile" KYC level without admin verification?

I want let users to be able to "complete profile" KYC level with admin verification.

Mobile kyc page not showing

when visit profile->kyc page on mobile not showing

Uncaught (in promise) TypeError: e._innerWindow(...).widgetReady is not a function

I've seen this issue in TradingView github and several posts have indicated to serve build without -s but seems that made no improvement...

I'm using 2.5.5 of baseapp and wondering if anyone has had this problem? It throws this error when I load the trading page and affects just the chart when you change markets. Everything else changes to the proper market except the chart doesn't switch...

Thanks

error in yarn start-mock

Baseapp is not running ...

warning : unmet peer dependency

how to fix these warnings

warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
warning " > [email protected]" has unmet peer dependency "popper.js@^1.16.0".
warning " > [email protected]" has incorrect peer dependency "react@^15.4.1".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.6.0".
warning " > [email protected]" has unmet peer dependency "prop-types@^15.5.4".
warning " > [email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning " > [email protected]" has incorrect peer dependency "react-scripts@^1.0.14".
warning " > [email protected]" has incorrect peer dependency "jest@>=22 <24".
warning nohoist config is ignored in "@openware/cryptofont" because it is not a private package. If you think nohoist should be allowed in public packages, please submit an issue for your use case.

ESlint errors

Hello from bitzlato team.

We want to use linters at full power and want to keep compatibility with your codebase. And a large number of errors are blocking this.

➜  web git:(master) ✗ yarn lint --no-ignore
yarn run v1.22.10
$ eslint --ext .ts,.tsx src --no-ignore
...
✖ 28175 problems (27624 errors, 551 warnings)
  26523 errors and 5 warnings potentially fixable with the `--fix` option.

Do you have any plans to fix ESlint/prettier errors?

Add fee page

please add fee page as like this

Withdrawal Amount: Amount value you send could not be parsed into Decimal type 422

POST /api/v2/peatio/account/withdraws requires amount parameter as string or integer but baseapp sends amount as float in a request.

Actual request

{"amount":0.1,"currency":"eth","otp":"12345","beneficiary_id":1}

BigDecimal(0.1)  # `BigDecimal': can't omit precision for a Float. (ArgumentError)

Expected request

{"amount":"0.1","currency":"eth","otp":"12345","beneficiary_id":1}

Missing `secret_key_base` for 'production' environment, set this string with `rails credentials:edit`>

All the docker containers are running fine, but when I hit the URL which I have defined in app.yml file, it shows the error like this on black-white page An unhandled lowlevel error occurred. The application logs may have details.

these are the logs inside the frontend docker container

ERR_INVALID_ARG_TYPE

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at validateString (internal/validators.js:112:11)
at Object.join (path.js:1039:7)
at noopServiceWorkerMiddleware (/home/iman2/work/lab/baseapp/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:317:13)
at /home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:335:12)
at next (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:275:10)
at launchEditorMiddleware (/home/iman2/work/lab/baseapp/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:317:13)
at /home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:335:12)
at next (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/index.js:275:10)
at handleWebpackInternalMiddleware (/home/iman2/work/lab/baseapp/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (/home/iman2/work/lab/baseapp/node_modules/express/lib/router/layer.js:95:5)