Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add slot for Select Wallet button #58

Open
IlyaSemenov opened this issue May 7, 2024 · 1 comment
Open

Add slot for Select Wallet button #58

IlyaSemenov opened this issue May 7, 2024 · 1 comment

Comments

@IlyaSemenov
Copy link

As a developer, I would like to customize <wallet-multi-button /> text (say change it from "Select Wallet" to "Connect Wallet").

Currently, it's practically impossible without overriding the whole 100-liner slot:

<slot v-bind="{ ...modalScope, ...scope }">
<button
v-if="!wallet"
class="swv-button swv-button-trigger"
@click="modalScope.openModal"
>
Select Wallet
</button>
<wallet-connect-button
v-else-if="!publicKeyBase58"
></wallet-connect-button>
<div v-else class="swv-dropdown">
<slot name="dropdown-button" v-bind="{ ...modalScope, ...scope }">
<button
class="swv-button swv-button-trigger"
:style="{ pointerEvents: dropdownOpened ? 'none' : 'auto' }"
:aria-expanded="dropdownOpened"
:title="publicKeyBase58"
@click="openDropdown"
>
<wallet-icon :wallet="wallet"></wallet-icon>
<p v-text="publicKeyTrimmed"></p>
</button>
</slot>
<slot name="dropdown" v-bind="{ ...modalScope, ...scope }">
<ul
aria-label="dropdown-list"
class="swv-dropdown-list"
:class="{ 'swv-dropdown-list-active': dropdownOpened }"
ref="dropdownPanel"
role="menu"
>
<slot name="dropdown-list" v-bind="{ ...modalScope, ...scope }">
<li
v-if="canCopy"
@click="copyAddress"
class="swv-dropdown-list-item"
role="menuitem"
>
{{ addressCopied ? "Copied" : "Copy address" }}
</li>
<li
@click="
modalScope.openModal();
closeDropdown();
"
class="swv-dropdown-list-item"
role="menuitem"
>
Change wallet
</li>
<li
@click="
disconnect();
closeDropdown();
"
class="swv-dropdown-list-item"
role="menuitem"
>
Disconnect
</li>
</slot>
</ul>
</slot>
</div>
</slot>

While some other buttons have fine-grain slots such as <slot name="dropdown-button">, there is no slot for the primary button.

@y4my4my4m
Copy link

@lorisleiva Is this possible to implement?
Seems like a minimal change. I'd like to be able to style it (like add tailwind w-full class to the button when in my sub menu)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants