bitshares / bitshares-ui

Fully featured Graphical User Interface / Reference Wallet for the BitShares Blockchain

BitShares-UI

中文版

This is the reference wallet of BitShares Blockchain which connects to BitShares Blockchain nodes (bitshares-core).

This reference wallet is a browser based wallet, which means your keys are stored locally in your browser and never leaves it while using the wallet. You should never expose your keys to anyone as transactions are signed locally before transmitting them to a node.

Getting started

Building BitShares-UI browser based reference wallet depends on node version 16 using a non-root user.

On Ubuntu or macOS, the easiest way to install node is to use Node Version Manager.

Install nvm according to your platforms recommendation and set the version

nvm install v16
nvm use v16

Once you have node installed, clone the repository using the following commands:

git clone https://github.com/bitshares/bitshares-ui.git
cd bitshares-ui

Before launching the UI you will need to install the packages using yarn on a non-root user:

yarn install

Running the dev server

Once all the packages have been installed you can start the development server by running:

yarn start

Once the compilation is done the UI will be available in your browser at: localhost:8080 or 127.0.0.1:8080. Hot Reloading is enabled so the browser will live update as you edit the source files.

Testnet

By default bitshares-ui connects to the BitShares mainnet, but it's very easy to switch it to the testnet. To do so, open the UI in a browser, go to Settings, then under Nodes, select the Testnet in the dropdown menu. The UI will reload and connect to the testnet.

There is also a ready-made deployment directly connected to testnet including account creation available here.

Production

If you'd like to host your own UI somewhere, you should create a production build and host it using NGINX or Apache. In order to create a prod bundle, simply run the following command:

yarn run build

This will create a bundle in the ./build/dist folder that can be hosted with the web server of your choice.

Installable (local wallet)

We use Electron to provide installable wallets, available for Windows, macOS and Linux Debian platforms such as Ubuntu. There is a GitHub Action available that shows all the steps necessary for this build.

This will compile the UI with some special modifications for use with Electron, generate installable binaries with Electron and copy the result to the root build/binaries folder.

Docker

Clone this repository, run docker-compose up and visit localhost:8080

Contributing & Coding style guideline

See CONTRIBUTING.md

Code of Conduct

This repository has a Code of Conduct that should be followed by everyone. Please read CODE_OF_CONDUCT.md

Please keep comments constructive and clean

BrowserStack

The BitShares UI is integrated with BrowserStack (https://www.browserstack.com) to allow manual compatibility testing across devices and browser versions. In the future we will switch to a automated Selenium testing framework.

Release Branches

There are three branches that forms the current release process.

Develop

All PRs should be pushed to the develop branch. New commits are automatically deployed to this branch and published for review.

Available for browsing on https://develop.bitshares.org

Staging (Current Release Candidate)

At the end of each milestone, develop branch is pushed to staging and forms the Release Candidate. The date of the RC forms the name, ie. 5.0.220214-rc1.

Application breaking issues and bugs should be submitted to the issue tracker and PRs should be pushed to staging.

Available for browsing on https://staging.bitshares.org

Master (stable)

When all major issues to the current RC are fixed, staging branch is released to the stable master branch.

Available for browsing on https://wallet.bitshares.org which is the official reference wallet for Bitshares.

bitshares-ui's Issues

Enhancement - Trade UI - Consider removing the "favorite" stars from "My Markets" tab and make them visible only when hovering. Reduces bloat

From @ValentinJesse on December 21, 2015 11:47

Something similar to this:

Copied from original issue: cryptonomex/graphene-ui#621

[1.5] Missing wallet preferred currency on hover at total sum

From @btswolf on March 13, 2016 19:2

Copied from original issue: cryptonomex/graphene-ui#777

Please add detail of a multi signature transaction

From @imYao on August 21, 2016 15:23

Why GUI wallet didn't offer a view of multi signature transactions? Very inhuman!
Each one of multi-signer need to know the detail of the multi-sig transaction to prevent cheating.

Such as:

• Transfer?
• Trade Oder?
• Modify the weights and thresholds?

Thanks for your job.

Copied from original issue: cryptonomex/graphene-ui#867

BitShares 2.0.160121 - Fiat withdraw screen on Light Wallet - no navigation

From @bitsacer on January 22, 2016 14:39

On the light-wallet navigation buttons missing on OpenLedger's withdraw screen

Copied from original issue: cryptonomex/graphene-ui#682

Privacy enhancements to wallet network behavior

From @cryptokarnal on June 17, 2016 9:5

Based on a discussion ~1week ago on bitsharestalk.org, I'd like to propose the following:

• Allow selecting a wss:// endpoint per wallet, to help prevent the server from correlating requested balances (that map to account name) with the users' ip address.
• When switching between wallets, tear down the connection to the server; Add an option to re-establish the connection after about $selectable seconds.
• Implement SOCKS5 proxying support, possible HTTP as well, so that the client can further gain in privacy by hiding the originating ip address from the server.

Copied from original issue: cryptonomex/graphene-ui#854

[1] Need ability to click on the Block number

From @kenCode-de on November 6, 2015 8:59

I want to easily prove to someone that I paid their bill.

I open the light client, I find that transaction and click on it. It shows me the block number at the top of the screen.

I would like to be able to click on that block number so that it loads up the block explorer (so I can email the link to my creditor), ie:
http://cryptofresh.com/b/677376

Copied from original issue: cryptonomex/graphene-ui#455

[.25] Request: show a warning about core_exchange_rate at asset create/update page

From @abitmore on March 23, 2016 13:10

The fact:

1. half of asset creation fee will go to the fee pool.
2. funds in the fee pool belongs to the asset issuer, and it can be withdrawn safely if no outstanding asset exists (a bit tricky though)
3. any asset holder can sell the asset back to the issuer at core_exchange_rate if the fee pool is not empty. If the issuer didn't set the rate correctly/safely, funds in the fee pool is unsafe. See https://cryptofresh.com/u/asshole1 and https://cryptofresh.com/u/acc12 for example.

Copied from original issue: cryptonomex/graphene-ui#796

Buy/Sell BTS

From @wmbutler on November 6, 2015 17:3

The idea here is to create a dead simple, one stop process for assisting users with acquiring BTS from their BTC wherever they may have it stored. Making it easy for people to acquire BTS is critical and although technically it can be done with the existing wallet, is needs to be easier. Coinbase handles this function for millions of people and it's a pretty smooth process.

Copied from original issue: cryptonomex/graphene-ui#457

On Voting/Workers page it's not obvious that changes take no effect until published

From @valzav on February 5, 2016 19:26

So maybe after Approve button is pressed, it needs to say something like "Supported (publish to cast your vote)" in the status field?

Copied from original issue: cryptonomex/graphene-ui#718

add "generate key" button to account permissions' key input

From @valzav on September 29, 2015 22:43

Copied from original issue: cryptonomex/graphene-ui#255

Deposit/Withdraw UX concept

From @wmbutler on November 8, 2015 0:36

The deposit/withdraw functionality of the current wallet is functional, however, it hides important information that is necessary for new users to gain comfort. This is a particularly critical time for our interaction with the client. We have the benefit of knowing that they have a $0 balance when they first create their wallet and we should customize the UX to make it easy for them. The sentence: Now that you’ve created your account, it’s time to bring in some funds should be present only if their account balance is $0.

I'm proposing this as a process of 3 steps.

• Choose the gateway provider
• Choose the currency to deposit
• Choose the deposit amount

It's my belief that a user needs tangible numbers to help them with their calculations. And, generally speaking, they want those number in a currency they can reference easily. I think that always displaying their default currency in parentheses is a great idea because it aids them in their decision. See the "You are Planning..." paragraph that should populate dynamically based upon the 3 values chosen above.

Once the user has made the decisions, they should be able to display a QR code and address that they can easily copy/paste.

Copied from original issue: cryptonomex/graphene-ui#465

Inconsistent password after password change

From @dnotestein on January 10, 2016 19:25

I changed the password of an account while I had two tabs open to that account (in the same browser). The old page still uses the old password for locking and unlocking the account. I'm also wondering if it's possible that the old password could be inadvertently saved back to the browser cache by the page that still uses the old password.

Copied from original issue: cryptonomex/graphene-ui#663

UI proposal: View vertical menu on any page by toggling hamburger icon

From @jonnybitcoin on February 19, 2016 1:53

See proposed UI mockup image below.
I personally find navigating to pages listed on the vertical menu too slow.

• Add burger icon to top left corner which will slide out/in the vertical menu.
• Move account selection drop down (in header) to far left and show on every page.

Disadvantage would be the slide out vertical menu would cover some of the info when open. (youtube.com does this and it looks fine)

Copied from original issue: cryptonomex/graphene-ui#742

Indicators (MACD, Stoch, OBV)

From @wmbutler on November 29, 2015 14:45

• MACD
• StochRSI (see bitcoinwisdom)
• OBV (On Balance Volume)

Copied from original issue: cryptonomex/graphene-ui#562

[4] Notify users about available update in the wallet

From @btswolf on March 9, 2016 16:7

If there is a new public release of the light wallet there should be an indicator that a newer version is available. Could be at the bottom. Update available.... outdated etc...

Copied from original issue: cryptonomex/graphene-ui#765

Wallet UI needs SOCKS5 proxy support

From @cryptokarnal on June 27, 2016 15:27

Presently, other than transparently proxying the wallet (for power users/sysadmins only), there is no support to proxy the connection to the api server from the wallet.

Please consider adding proxy support, to better protect the privacy of bitshares users, thank you.

Copied from original issue: cryptonomex/graphene-ui#857

I want to have dates not useless information about blocknumber in my history!

From @noisy on March 3, 2016 3:5

I am not a robot. As a user I prefer to you see and use well formmated dates like 03/03 02:51:12, rather than seeing a useless information about block number.

The interesting part is... that this is not only wrong.. but this is not even a consistent:

All History has good date:

Copied from original issue: cryptonomex/graphene-ui#755

Troll box can eat up all socket connections for firefox

From @dnotestein on May 5, 2016 14:58

This results in web sites not resolving via DNS until OpenLedger web page is closed.

Copied from original issue: cryptonomex/graphene-ui#844

GUI development for BSIP10 percentage based transfer fee

From @abitmore on March 1, 2016 11:33

This ticket is for tracking GUI works of BSIP10.

• The BSIP10 feature requirement/description is here.
• main back-end develop branch is here.

Things to be done:

• check whether the transfer feature in current GUI is compatible with new back-end
• add an selection box on the "create asset" page and "update asset" page, so the issuer can set fee mode easily
• show transfer fee mode on asset details page, and maybe somewhere related (please indicate)
• use new transfer_v2_operation to do all transfers, or use new operation on assets with percentage fee mode but use the original transfer_operation on assets with flat mode
• transaction history / Recent activity (should I list the pages which contain a list of history?)
• block detail page (the page after click on a transaction in the history)
• extend fee estimation to handle percentage fees (only needed if GUI estimates fees independently but not call get_required_fees API).
• check if the fee schedule page work with new back-end
• adjust "Fees and cashback" section of membership page, and maybe description of "Fee Division", and maybe some related pages (please indicate)
• [optional] deal with the No. 4 issue described in BSIP10 document (overpay fee to avoid trx failure)

Copied from original issue: cryptonomex/graphene-ui#754

[4] Asset update: Claim asset fees amount checking issue

From @abitmore on March 12, 2016 9:19

When there is 1,000,000,000 fee accumulated, it's unable to claim more than 1000 each time, otherwise the "claim" button got disabled. (CER = 1,000,000 asset : 1 BTS)

Copied from original issue: cryptonomex/graphene-ui#773

Populate withdraw amount with a click

From @nmywn on May 17, 2016 14:39

Copied from original issue: cryptonomex/graphene-ui#848

Build environment (npm install w/ v6) issue (peer dependency)

Using nvm v6 since the recent update.

├── UNMET PEER DEPENDENCY [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/ch okidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64" })
npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] license should be a valid SPDX license expression

I managed to successfully install coffeescript via 'npm install [email protected]'

Edit: This is admitedley a bit of a non-issue since you can just manually install the missing package..

Electron light wallet --data-dir param

From @testzcrypto on December 10, 2015 12:57

Please add possibility to specify electron light wallet data directory where to keep wallet data. In current version all data stores at %APPDATA%\BitShares2-light (under Windows).

Related links:
https://www.chromium.org/user-experience/user-data-directory
https://github.com/atom/electron/blob/master/docs/api/app.md#appgetpathname
electron/electron#647
electron-archive/brightray#89

Copied from original issue: cryptonomex/graphene-ui#602

[5][gibbsfromncis] Exchange: Set Expiration time for orders

From @valzav on June 23, 2015 18:52

Copied from original issue: cryptonomex/graphene-ui#6

User experience Optimization: API & Language selection should displayed in the home page and start page

From @imYao on August 21, 2016 16:16

User experience Optimization: API & Language selection should displayed in the home page and start page.
Thanks for your job.

Copied from original issue: cryptonomex/graphene-ui#869

UI/UX: Need ability to search Recent Activity

From @kenCode-de on March 10, 2016 15:49

Right next to the CSV link would be a great place to put a search field. Maybe even add from/to date range fields.

Then, ability to export just those search results to CSV would be cool too. I need to be able to quickly prove every payment that was received from someone.

Copied from original issue: cryptonomex/graphene-ui#769

Pricing in order confirmation window

From @abitmore on March 18, 2016 21:37

https://bitsharestalk.org/index.php/topic,21961.msg192149.html

Copy & paste here:

Another UI fix would be to adjust the price in the order confirmation windows to be quoted in the same asset base as the market. For instance, we can view any of the markets in either ASSET-BTS or BTS-ASSET --i prefer using ASSET-BTS to normalize them all to a BTS base; however, even when i'm viewing the market as ASSET-BTS, for some markets (e.g. BTS-BTC) automatically show the BTS-ASSET price in the trade confirmation window. This is confusing and sometimes leads me to post trades at the wrong price bc sometimes the automatic fill in the Buy/Sell windows reverts to the the last trade.

A good fix would be to ensure the confirmation window posts the quote in the same base unit as the market we're trading.

Copied from original issue: cryptonomex/graphene-ui#789

[2.5][nikandrovalex][1][gibbsfromncis] UX Add support for recurring payments

From @svk31 on December 29, 2015 7:10

Copied from original issue: cryptonomex/graphene-ui#639

Reset config button

From @xeroc on July 11, 2016 5:46

It would be great if there was a "reset config" button in the settings so that we have a chance of changing settings for a hosted wallet (e.g. the faucet url, or the websocket url .)

Copied from original issue: cryptonomex/graphene-ui#862

[7] Show status of all API servers?

From @abitmore on March 15, 2016 22:16

Show status of all API servers on init-error page and/or config page and/or a dedicated page? Status includes:

• up/down
• latency
• load
• location
• description

So user can select fastest server, or maybe eventually auto-select.

Related to #770.

Copied from original issue: cryptonomex/graphene-ui#784

[4] Voting: show standby witnesses and committee members

From @abitmore on March 31, 2016 13:13

We should show standby witnesses and committee members in GUI, so people can vote for them.

Copied from original issue: cryptonomex/graphene-ui#801

add date/time to trollbox chat

From @btswolf on July 8, 2016 22:18

Copied from original issue: cryptonomex/graphene-ui#861

add asset description on mouseover

From @btswolf on January 22, 2016 22:30

Display asset information when moving the mouse over the asset name.
There should be a quicklink to the corresponding asset page too.

Copied from original issue: cryptonomex/graphene-ui#686

Transfer: update "available" after empty

From @abitmore on March 12, 2016 8:7

Assume I have 10 IOU and 100 BTS in my account.
Steps:

• click on "Send"
• input "to", select "IOU" from "amount" box: the "available" amount is updated
• click "available", click "send": asset in the amount box is updated to "BTS" and unable to change, "available" is updated to "0 IOU" but didn't change to "XXX BTS"

Copied from original issue: cryptonomex/graphene-ui#772

Improvements aimed at increasing voting participation

By neura-sx:
Voting apathy is a serious vulnerability for the blockchain. It can be assumed that a lot of users don't vote because they don't realize that. These are simple changes that are aimed to alleviate this problem to some extent:

(1) If the system finds out that an account has a balance of e.g. 100k BTS (or more) and is not voting (i.e. no proxy set and there is no support for at least 10 witnesses), it should display a red warning in the footer (just as we have it for the wallet backup reminder).

(2) On the voting page there should be a clear instruction that the easiest way to vote is to select a proxy. To facilitate the choice of proxies a link to this forum board should be offered in the GUI:
https://bitsharestalk.org/index.php/board,104.0.html

(3) It's much easier to vote when you have a list to choose from (as we have it for worker proposals) instead of typing an account name. Currently we cannot compile a list of active proxies but a list of available accounts should be doable for witnesses and committee members.

Consistent Color Tone

From @clayop on December 3, 2015 20:20

Currently three colors categories (green, red, and tortoise(blue)) are used. We need to have consistency in color tone. Maybe needs @cassiopaia 's input.

I personally prefer imitating bitcoinwisdom's color concept. (red/green in chart, and pale red and pale green in buy/sell orders)

Copied from original issue: cryptonomex/graphene-ui#577

Cursor moves improperly when inserting characters in edit box

From @dnotestein on January 10, 2016 19:4

When you type a character into the middle of a text string in an edit box (e.g. in the amount field of the transfer form), it moves the cursor to the end of the edit box. This is extremely annoying.

Copied from original issue: cryptonomex/graphene-ui#662

Fiat deposits and withdrawals - Links are confusing

From @kenCode-de on January 22, 2016 14:47

Running latest v...121 light client
Just FYI, I have never used OpenLedger, but I do have a CCEDK.com account.

In Overview, click an account, click deposit/withdraw, click ccedk, click "Click here to register for deposits". This loads up an external browser window which looks a little shady. Can't I just enter my CCEDK login info here with the hash and 2FA info? I'd rather not have to photocopy my passport again and all that kyc stuff.

click "Click here to register for withdrawals". This loads up a screen in the wallet which is better, but the menu across the top is gone now, so there is no way to Back button to the previous screen. There also needs to be something at the top of this page that says what this registration is for, what you will now be able to accomplish by registering here, etc. Why should I register....? A sales pitch of sorts, but keep it short and to the point.

Copied from original issue: cryptonomex/graphene-ui#683

Show indication for insufficient funds for proposed transaction fee

From @svk31 on August 23, 2016 8:4

See issue #870 for background.

Copied from original issue: cryptonomex/graphene-ui#871

Check BTC/PTS addresses on key/balance import?

From @abitmore on March 15, 2016 23:49

Latest CLI has the ability to import BTC/PTS keys. Is it possible with GUI?
See
cryptonomex/graphene#558
cryptonomex/graphene#557

Copied from original issue: cryptonomex/graphene-ui#785

[2] Ignored accounts appear again after relaunch

From @abitmore on March 15, 2016 8:58

It seems current size of ignore_account_list is still too small for me? After relaunched the light client, about 10 accounts appear again, other accounts are still hidden well.

Copied from original issue: cryptonomex/graphene-ui#781

Wallet auto lock

From @valzav on October 1, 2015 21:31

• setting to control timeout
• lock wallet automatically after timeout has elapsed

Copied from original issue: cryptonomex/graphene-ui#265

UI 170118 - Market Depth Charts don't flip with market flip

When you flip the market, the depth charts do not flip. Once you flip the market you must click back to the price chart and then go back to the depth chart for it to update.

Price chart automatically flips when you flip the market as it should.

Indicators (Fib, EMA, Bollinger)

From @wmbutler on November 29, 2015 14:44

• Fib levels (Fibonacci Retracements)
• EMA2 Period
• Bollinger Band

Copied from original issue: cryptonomex/graphene-ui#561

Trollbox causes high and increasing CPU usage

From @svk31 on May 12, 2016 6:35

Looks like this is a Chrome/browser bug related to WebRTC connections. It has been present for quite some time but will apparently be fixed in an upcoming release, as reports are saying it's fixed in the current Chrome Canary build (v52).

https://bugs.chromium.org/p/webrtc/issues/detail?id=5733

Copied from original issue: cryptonomex/graphene-ui#846

Escape key should close popup windows/modals

From @kenCode-de on December 5, 2015 14:41

Just a small UX request..

I am so used to hitting Escape to close dialogs that popup I thought it would be cool if the same functionality would work in the graphene-ui as well.

Copied from original issue: cryptonomex/graphene-ui#588

add client-server connection status

From @btswolf on February 5, 2016 21:34

For troubleshooting reasons is would be great to have an indicator that shows the connection quality to the server.

maybe at the bottom left of the Blocks.
GOOD (<30ms), SLOW (<150ms), POOR (>150ms)
GREEN/YELLOW/RED

Copied from original issue: cryptonomex/graphene-ui#719

Witness UI does not update when vote change takes effect

From @theoreticalbts on January 4, 2016 4:9

A bunch of witness votes went into effect shortly after the meltdown just after midnight, Jan. 4, 2016, UTC. Leaving the witness UI open to the table view left the "Active Witnesses" at 25 in the UI (when it had actually been reduced to 21) and the numbering had gaps, this was fixed on reloading the UI.

Copied from original issue: cryptonomex/graphene-ui#649

add price at pointer location on the price chart

From @donvito-pl on July 27, 2016 19:30

While hovering over the price chart there should be a price label somewhere showing the price pointed by cursor.

https://bitsharestalk.org/index.php/topic,18614.msg296973.html#msg296973

Copied from original issue: cryptonomex/graphene-ui#864

the new ccedk fiat thing is very confusing

From @kenCode-de on January 25, 2016 13:53

deposit/withdraw screen, click ccedk tab.

this text is displayed 3 times:
Click here to register for deposits

this text is displayed 3 times too:
Click here to register for withdrawls

VERY confusing.
Worse yet, both of the "here" hyperlinks appear to load the same form, but one is in my external browser and the other keeps you in the wallet with no way to cancel and go Back (button).

This screen also needs an explanation, an upsell, and a fine print disclaimer underneath of the fiat section. My grandma should feel very comfortable when sending all of her private, high security info to some invisible entity behind the scenes here. This screen is far too scary (and risky) as it sits now.

Copied from original issue: cryptonomex/graphene-ui#691