BitShares Forum

Main => General Discussion => Topic started by: R on July 02, 2017, 04:48:19 pm

Title: Bitshares UI Customization Guide!
Post by: R on July 02, 2017, 04:48:19 pm
Hey,

Fuzzy contacted me on Telegram regarding the potential development of customized web wallets, so I created a draft guide regarding how to customize the Bitshares UI. The aim of this guide is to provide a fast on-ramp for new UI developers.

The guide covers the dev environment setup, editing the header/footer, changing the featured trading pairs throughout the UI and how to create new themes.

I'd greatly appreciate input on the guide, it's open source & MIT licensed on GitHub so it's open to the community to aid its development:
https://steemit.com/bitshares/@cm-steem/bitshares-ui-customization-guide
https://github.com/grctest/BTS-UI-Customization

Cheers,
CM.
Title: Re: Bitshares UI Customization Guide!
Post by: fav on July 03, 2017, 06:15:10 am
 +5%
Title: Re: Bitshares UI Customization Guide!
Post by: xeroc on July 04, 2017, 03:37:58 pm
+5%

shameless plug ... if you want to use bitshares.eu's faucet with your own referral tracking code, all you need to do is register on bitshares.eu and get your code. it will show your the correct link to embed into your wallet.
Title: Re: Bitshares UI Customization Guide!
Post by: fuzzy on July 06, 2017, 10:22:20 pm
+5%

shameless plug ... if you want to use bitshares.eu's faucet with your own referral tracking code, all you need to do is register on bitshares.eu and get your code. it will show your the correct link to embed into your wallet.

 +5%
glad to see it is shameless!

no need to be ashamed of promoting options you have made possible ;)
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on December 25, 2017, 05:35:49 am
Hello !

Thank you very much for your posts !

However I have a lot of difficulties personalising the 'topmarkets' dashboard. I followed the guide but most tradings pair doesn't appear, even though I added pictures in the right sizing.
Any help on this would be very much appreciated !

With best regards,

Tatch
Title: Re: Bitshares UI Customization Guide!
Post by: R on December 26, 2017, 12:42:24 pm
Hello !

Thank you very much for your posts !

However I have a lot of difficulties personalising the 'topmarkets' dashboard. I followed the guide but most tradings pair doesn't appear, even though I added pictures in the right sizing.
Any help on this would be very much appreciated !

With best regards,

Tatch

The BTS-UI has changed quite a lot since this guide was created, it's possible that the instructions are no longer accurate.

Are there any errors showing in the web browser console?

You may need to remove/replace some of the default trading pairs from the main page for your additions to show.
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on December 29, 2017, 11:55:41 am
Hello !


Thanks again for reply !!! I'am getting crazy on this  :P

(https://s9.postimg.org/trhimzdsr/Capture_d_cran_2017-12-25_17.08.23.png) (https://postimg.org/image/trhimzdsr/)
(https://s9.postimg.org/f8adll7t7/Capture_d_cran_2017-12-25_17.09.37.png) (https://postimg.org/image/f8adll7t7/)

I added some UIA with logo in the right format but even 'normal' pairs like EUR:GOLD doesn't appear :/

Kind regards,

Tatch
Title: Re: Bitshares UI Customization Guide!
Post by: R on December 29, 2017, 01:27:36 pm
@tatch

I believe you're editing the featured markets (what shows in the sidebar of the exchange view), you need to edit topmarkets in order to change the assets on the index page (I think).

https://github.com/bitshares/bitshares-ui/blob/3b2a2753991cf128d9de5701c78aa267e5da0e2a/app/stores/SettingsStore.js#L172
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on December 29, 2017, 01:43:57 pm
I think it's all changed properly :/

But I'm connecting to any node and with bitshares.eu faucet; do I need to run a full node and connect to it ? (don't think it will change anything).
(https://img15.hostingpics.net/thumbs/mini_976147Capturedcran20171229144443.png) (https://www.hostingpics.net/viewer.php?id=976147Capturedcran20171229144443.png)
Title: Re: Bitshares UI Customization Guide!
Post by: R on December 29, 2017, 02:00:47 pm
I think it's all changed properly :/

But I'm connecting to any node and with bitshares.eu faucet; do I need to run a full node and connect to it ? (don't think it will change anything).
(https://img15.hostingpics.net/thumbs/mini_976147Capturedcran20171229144443.png) (https://www.hostingpics.net/viewer.php?id=976147Capturedcran20171229144443.png)

The image is too small to read.

You need to run your own web wallet as per the guide's instructions, you don't need to run your own full/api node.
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on December 29, 2017, 02:10:09 pm
Sorry about that here is the pic in better quality.

(https://preview.ibb.co/feuQwb/Capture_d_cran_2017_12_29_14_44_43.png) (https://ibb.co/dzbupw)
img upload (https://fr.imgbb.com/)

For the rest, I followed the guide step by step
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on December 29, 2017, 02:45:35 pm
@tatch

I believe you're editing the featured markets (what shows in the sidebar of the exchange view), you need to edit topmarkets in order to change the assets on the index page (I think).

https://github.com/bitshares/bitshares-ui/blob/3b2a2753991cf128d9de5701c78aa267e5da0e2a/app/stores/SettingsStore.js#L172

TopMarkets change markets display under 'exchange' and BaseMarkets are the different tabs for those markets. And those works fine, no problem as you can see here;
(https://preview.ibb.co/bOP0wb/Capture_d_cran_2017_12_29_15_36_14.png) (https://ibb.co/gd2nbb)
img upload (https://fr.imgbb.com/)

It's really just the dashboard that doesn't load all requested pairs but only a few which is very 'weird' as "assets" folder contain all necessary pictures in the right format.
As you can see, none of the EUR pair are display, only some in USD and BTS.
(https://preview.ibb.co/m9hW2G/Capture_d_cran_2017_12_29_15_43_13.png) (https://ibb.co/jTP0wb)
img upload (https://fr.imgbb.com/)

Again, thank you very much for your support @Customminer !
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on December 29, 2017, 07:35:26 pm
In the inspector I get <!--react-empty: 35X->
Which correspond to the pairs that do not display.
(https://image.noelshack.com/minis/2017/52/5/1514576106-capture-d-ecran-2017-12-29-a-20-30-55.png) (https://www.noelshack.com/2017-52-5-1514576106-capture-d-ecran-2017-12-29-a-20-30-55.png)
Apparently it's a problem with react
Title: Re: Bitshares UI Customization Guide!
Post by: tatch on January 03, 2018, 05:31:37 am
Hello,

I have still tried on a fresh install with necessary node modules, etc but it's just does work.
Actually Dashboard does display properly for a flash second then only those 2 pairs.

Also, I have put the midnight theme first in SettingsStore.js but it's still 'Dark' theme that appears by default... :-\

I have attached console logs maybe it help.

(https://preview.ibb.co/m3s6Pw/Capture_d_cran_2018_01_03_06_27_25.png) (https://ibb.co/bPAt4w)
What am I doing wrong here ? :-[

Btw: happy new year !