feat: wallet account selector for substrate

[Lykhoyda]

Closes #74

[mpetrunic]

We should target dev branch with this PR as this is not in scope of first QA

[Lykhoyda]

@mpetrunic @sztok7 @wainola thank you everyone for the review and suggestion! I updated the code accordingly

[mpetrunic]

@Lykhoyda when I select different account in dropdown it doesn't update connected wallet address displayed

[Lykhoyda]

@Lykhoyda when I select different account in dropdown it doesn't update connected wallet address displayed

@mpetrunic maybe you know another way to solve it but the problem was the following: We have a state selectedOption inside the dropdown, I pass the state inside sygma-substrate-account-selector to the dropdown to add a pre-selected first option to the list (options[0]):

<dropdown-component
          .selectedOption=${options[0]}
          .actionOption=${this.renderDisconnectSubstrateButton()}
          .options=${options}
          .onOptionSelected=${this.handleSubstrateAccountSelected}
        >

when we select new account the state being updated to the correct value, but it also re-render the entire component, and my selectedOption took over as a component just rendered.

.selectedOption=${options[0]}

So I set the pre-selected state inside dropdown for now. But maybe there is other solutions

[mpetrunic]

@Lykhoyda when I select different account in dropdown it doesn't update connected wallet address displayed

@mpetrunic maybe you know another way to solve it but the problem was the following: We have a state selectedOption inside the dropdown, I pass the state inside sygma-substrate-account-selector to the dropdown to add a pre-selected first option to the list (options[0]):

<dropdown-component
          .selectedOption=${options[0]}
          .actionOption=${this.renderDisconnectSubstrateButton()}
          .options=${options}
          .onOptionSelected=${this.handleSubstrateAccountSelected}
        >

when we select new account the state being updated to the correct value, but it also re-render the entire component, and my selectedOption took over as a component just rendered.

.selectedOption=${options[0]}

So I set the pre-selected state inside dropdown for now. But maybe there is other solutions

You could change that selected option is property instead of state which would allow substrate selector to change it on context update

[Lykhoyda]

@Lykhoyda when I select different account in dropdown it doesn't update connected wallet address displayed

@mpetrunic maybe you know another way to solve it but the problem was the following: We have a state selectedOption inside the dropdown, I pass the state inside sygma-substrate-account-selector to the dropdown to add a pre-selected first option to the list (options[0]):

<dropdown-component
          .selectedOption=${options[0]}
          .actionOption=${this.renderDisconnectSubstrateButton()}
          .options=${options}
          .onOptionSelected=${this.handleSubstrateAccountSelected}
        >

when we select new account the state being updated to the correct value, but it also re-render the entire component, and my selectedOption took over as a component just rendered.

.selectedOption=${options[0]}

So I set the pre-selected state inside dropdown for now. But maybe there is other solutions

You could change that selected option is property instead of state which would allow substrate selector to change it on context update

@mpetrunic tried with property, but it's behaves similar way