Author Topic: Bitshares UI Customization Guide!  (Read 1385 times)

0 Members and 1 Guest are viewing this topic.

Offline Customminer

  • Hero Member
  • *****
  • Posts: 524
  • Bitshares FTW!
    • View Profile
    • Gridcoin.US
  • GitHub: grctest
Bitshares UI Customization Guide!
« 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.
Hertz, Beyond Bitshares, Gridcoin!

Offline fav

  • Administrator
  • Hero Member
  • *****
  • Posts: 4244
  • No Pain, No Gain
    • View Profile
  • BitShares: fav
Re: Bitshares UI Customization Guide!
« Reply #1 on: July 03, 2017, 06:15:10 am »
 +5%
► How-to Buy BitShares: https://goo.gl/i9j2YZ

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12694
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BitShares: xeroc
  • GitHub: xeroc
Re: Bitshares UI Customization Guide!
« Reply #2 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.
Give BitShares a try! Use the http://testnet.bitshares.eu provided by http://bitshares.eu powered by ChainSquad GmbH

Offline fuzzy

Re: Bitshares UI Customization Guide!
« Reply #3 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 ;)
WhaleShares==DKP; BitShares is our Community! 
ShareBits and WhaleShares = Love :D

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #4 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

Offline Customminer

  • Hero Member
  • *****
  • Posts: 524
  • Bitshares FTW!
    • View Profile
    • Gridcoin.US
  • GitHub: grctest
Re: Bitshares UI Customization Guide!
« Reply #5 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.
Hertz, Beyond Bitshares, Gridcoin!

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #6 on: December 29, 2017, 11:55:41 am »
Hello !


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




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

Kind regards,

Tatch

Offline Customminer

  • Hero Member
  • *****
  • Posts: 524
  • Bitshares FTW!
    • View Profile
    • Gridcoin.US
  • GitHub: grctest
Re: Bitshares UI Customization Guide!
« Reply #7 on: December 29, 2017, 01:27:36 pm »
[member=43795]tatch[/member]

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
Hertz, Beyond Bitshares, Gridcoin!

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #8 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).
« Last Edit: December 29, 2017, 01:47:07 pm by tatch »

Offline Customminer

  • Hero Member
  • *****
  • Posts: 524
  • Bitshares FTW!
    • View Profile
    • Gridcoin.US
  • GitHub: grctest
Re: Bitshares UI Customization Guide!
« Reply #9 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).


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.
Hertz, Beyond Bitshares, Gridcoin!

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #10 on: December 29, 2017, 02:10:09 pm »
Sorry about that here is the pic in better quality.


img upload

For the rest, I followed the guide step by step

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #11 on: December 29, 2017, 02:45:35 pm »
[member=43795]tatch[/member]

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;

img upload

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.

img upload

Again, thank you very much for your support [member=42582]Customminer[/member] !

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #12 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.

Apparently it's a problem with react

Offline tatch

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: Bitshares UI Customization Guide!
« Reply #13 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.


What am I doing wrong here ? :-[

Btw: happy new year !