Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
69 feat implement the address badge as a vanilla component (#85)
* feat: connected address badge * feat: connected address modal * feat: show address badge when connected * feat: connected address font * refactor: badge with modal component removed * refactor: default address removed * test: connected address badge * revert: chevron left icon color * test: disconnect button in connected address modal
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { html, svg } from 'lit'; | ||
|
|
||
| export const DisconnectSvg = svg` | ||
| <path | ||
| d="M3 1C2.44771 1 2 1.44772 2 2V13C2 13.5523 2.44772 14 3 14H10.5C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13H3V2L10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1H3ZM12.6036 4.89645C12.4083 4.70118 12.0917 4.70118 11.8964 4.89645C11.7012 5.09171 11.7012 5.40829 11.8964 5.60355L13.2929 7H6.5C6.22386 7 6 7.22386 6 7.5C6 7.77614 6.22386 8 6.5 8H13.2929L11.8964 9.39645C11.7012 9.59171 11.7012 9.90829 11.8964 10.1036C12.0917 10.2988 12.4083 10.2988 12.6036 10.1036L14.8536 7.85355C15.0488 7.65829 15.0488 7.34171 14.8536 7.14645L12.6036 4.89645Z" | ||
| /> | ||
| `; | ||
|
|
||
| export const LightDisconnectSvg = html` | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="#777777"> | ||
| ${DisconnectSvg} | ||
| </svg> | ||
| `; | ||
| export const DarkDisconnectSvg = html` | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="#999999"> | ||
| ${DisconnectSvg} | ||
| </svg> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import type { TemplateResult } from 'lit'; | ||
| import { html, LitElement } from 'lit'; | ||
| import { customElement, property } from 'lit/decorators.js'; | ||
| import type { Theme, ThemeMode } from '../../constants'; | ||
|
|
||
| @customElement('vwk-connected-address-badge-with-modal') | ||
| export class ConnectedAddressBadgeWithModal extends LitElement { | ||
| @property({ type: String }) | ||
| mode: ThemeMode = 'LIGHT'; | ||
|
|
||
| @property({ type: String }) | ||
| theme: Theme = 'DEFAULT'; | ||
|
|
||
| @property({ type: String }) | ||
| address?: string; | ||
|
|
||
| @property({ type: Boolean }) | ||
| open = false; | ||
|
|
||
| @property({ type: Function }) | ||
| onDisconnectClick?: () => void = undefined; | ||
|
|
||
| override render(): TemplateResult { | ||
| return html` | ||
| <div> | ||
| <vwk-fonts></vwk-fonts> | ||
| <vwk-connected-address-badge | ||
| .mode=${this.mode} | ||
| .theme=${this.theme} | ||
| .address=${this.address} | ||
| .onClick=${this.handleOpen} | ||
| ></vwk-connected-address-badge> | ||
| <vwk-connected-address-modal | ||
| .mode=${this.mode} | ||
| .theme=${this.theme} | ||
| .open=${this.open} | ||
| .onClose=${this.handleClose} | ||
| .address=${this.address} | ||
| .onDisconnectClick=${this.onDisconnectClick} | ||
| ></vwk-connected-address-modal> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| private handleOpen = (): void => { | ||
| this.open = true; | ||
| }; | ||
|
|
||
| private handleClose = (): void => { | ||
| this.open = false; | ||
| }; | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'vwk-connected-address-badge-with-modal': ConnectedAddressBadgeWithModal; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { LitElement, css, html } from 'lit'; | ||
| import { customElement, property } from 'lit/decorators.js'; | ||
| import { Colors, ThemeMode } from '../../constants'; | ||
| import { friendlyAddress, getPicassoImage } from '../../utils/account'; | ||
|
|
||
| @customElement('vwk-connected-address-badge') | ||
| export class ConnectedAddressBadge extends LitElement { | ||
| static override styles = css` | ||
| /* Style for the badge */ | ||
| .wallet-badge { | ||
| display: flex; | ||
| width: fit-content; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 8px; | ||
| background-color: #4caf50; | ||
| color: #fff; | ||
| border-radius: 12px; | ||
| } | ||
| .wallet-badge:hover { | ||
| opacity: 0.9; | ||
| cursor: pointer; | ||
| } | ||
| .wallet-badge.DARK { | ||
| background-color: ${Colors.Dark}; | ||
| color: ${Colors.LightGrey}; | ||
| } | ||
| .wallet-badge.LIGHT { | ||
| background-color: ${Colors.LightGrey}; | ||
| color: ${Colors.Dark}; | ||
| } | ||
| /* Style for the wallet address */ | ||
| .wallet-address { | ||
| font-size: 14px; | ||
| margin-left: 8px; | ||
| font-family: monospace; | ||
| } | ||
| .address-icon { | ||
| width: 23px; | ||
| height: 23px; | ||
| margin-right: 4px; | ||
| border-radius: 50%; | ||
| } | ||
| `; | ||
|
|
||
| @property() | ||
| address?: string; | ||
|
|
||
| @property() | ||
| mode: ThemeMode = 'DARK'; | ||
|
|
||
| @property({ type: Function }) | ||
| onClick? = undefined; | ||
|
|
||
| render() { | ||
| return html` <div | ||
| class="wallet-badge ${this.mode}" | ||
| @click=${this.onClick} | ||
| > | ||
| <img | ||
| class="address-icon" | ||
| src=${getPicassoImage(this.address ?? '')} | ||
| /> | ||
| <span class="wallet-address" | ||
| >${friendlyAddress(this.address ?? '')}</span | ||
| > | ||
| </div>`; | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'vwk-connected-address-badge': ConnectedAddressBadge; | ||
| } | ||
| } | ||
Oops, something went wrong.