-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
<!--- Provide a general summary of your changes in the Title above --> ## Description <!--- Describe your changes in detail --> This PR adds toggle and input to introduce address to transfer ## Related Issue Or Context <!--- If suggesting a new feature or change, please discuss it in an issue first --> <!--- If fixing a bug, there should be an issue describing it with steps to reproduce --> <!--- Otherwise, describe context and motivation for change here --> Closes: #20 ## How Has This Been Tested? Testing details. <!--- Please describe in detail how you tested your changes. --> <!--- Include details of your testing environment, and the tests you ran to --> <!--- see how your change affects other areas of the code, etc. --> ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) - [ ] Documentation ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [ ] I have commented my code, particularly in hard-to-understand areas. - [ ] I have ensured that all acceptance criteria (or expected behavior) from issue are met - [ ] I have updated the documentation locally and in sygma-docs. - [ ] I have added tests to cover my changes. - [ ] I have ensured that all the checks are passing and green, I've signed the CLA bot --------- Signed-off-by: Marin Petrunic <[email protected]> Co-authored-by: Marin Petrunic <[email protected]> Co-authored-by: Filip Štoković <[email protected]> Co-authored-by: Marin Petrunić <[email protected]> Co-authored-by: Filip Štoković <[email protected]>
- Loading branch information
5 people
authored
Feb 1, 2024
1 parent
003416e
commit 9fa87ad
Showing
13 changed files
with
507 additions
and
284 deletions.
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
80 changes: 80 additions & 0 deletions
80
packages/widget/src/components/address-input/address-input.ts
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, html } from 'lit'; | ||
| import type { HTMLTemplateResult } from 'lit'; | ||
| import { customElement, property, state } from 'lit/decorators.js'; | ||
| import { ifDefined } from 'lit/directives/if-defined.js'; | ||
| import { Network } from '@buildwithsygma/sygma-sdk-core'; | ||
| import { when } from 'lit/directives/when.js'; | ||
| import { validateAddress } from '../../utils'; | ||
| import { styles } from './styles'; | ||
|
|
||
| @customElement('sygma-address-input') | ||
| export class AddressInput extends LitElement { | ||
| static styles = styles; | ||
| @property({ | ||
| type: String | ||
| }) | ||
| address: string = ''; | ||
|
|
||
| @property({ attribute: false }) | ||
| onAddressChange: (address: string) => void = () => {}; | ||
|
|
||
| @property({ | ||
| type: String | ||
| }) | ||
| network: Network = Network.EVM; | ||
|
|
||
| @state() | ||
| errorMessage: string | null = null; | ||
|
|
||
| connectedCallback(): void { | ||
| super.connectedCallback(); | ||
| this.handleAddressChange(this.address); | ||
| } | ||
|
|
||
| private handleAddressChange = (value: string): void => { | ||
| const trimedValue = value.trim(); | ||
|
|
||
| if (this.errorMessage) { | ||
| this.errorMessage = null; | ||
| } | ||
|
|
||
| if (!trimedValue) { | ||
| return; | ||
| } | ||
|
|
||
| this.errorMessage = validateAddress(trimedValue, this.network); | ||
|
|
||
| if (!this.errorMessage) { | ||
| void this.onAddressChange(trimedValue); | ||
| } | ||
| }; | ||
|
|
||
| render(): HTMLTemplateResult { | ||
| return html` <section class="inputAddressSection"> | ||
| <div class="inputAddressContainer"> | ||
| <label class="labelContainer"> | ||
| <span>Send to </span> | ||
| ${when( | ||
| this.errorMessage, | ||
| () => html` <span class="errorMessage">${this.errorMessage}</span>` | ||
| )}</label | ||
| > | ||
| <textarea | ||
| class=${this.errorMessage ? 'inputAddress error' : 'inputAddress'} | ||
| name="address" | ||
| @change=${(evt: Event) => | ||
| this.handleAddressChange((evt.target as HTMLInputElement).value)} | ||
| > | ||
| ${ifDefined(this.address)} | ||
| </textarea | ||
| > | ||
| </div> | ||
| </section>`; | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'sygma-address-input': AddressInput; | ||
| } | ||
| } |
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 @@ | ||
| export { AddressInput } from './address-input'; |
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,51 @@ | ||
| import { css } from 'lit'; | ||
|
|
||
| export const styles = css` | ||
| .inputAddressSection { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| gap: 0.5rem; | ||
| min-height: 7.75rem; // TOO: remove this hardcoded value | ||
| } | ||
| .inputAddressContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| min-height: 7.75rem; // TOO: remove this hardcoded value | ||
| gap: 0.5rem; | ||
| } | ||
| .inputAddress { | ||
| border-radius: 1.5rem; | ||
| border: 0.063rem solid var(--zinc-200); | ||
| font-size: 0.875rem; | ||
| text-align: center; | ||
| resize: none; | ||
| box-sizing: border-box; | ||
| overflow: hidden; | ||
| padding: 1rem; | ||
| } | ||
| .inputAddress:focus { | ||
| outline: none; | ||
| border: 0.063rem solid var(--zinc-200); | ||
| } | ||
| .error { | ||
| border-color: red; | ||
| } | ||
| .errorMessage { | ||
| color: red; | ||
| font-weight: 300; | ||
| font-size: 0.75rem; | ||
| } | ||
| .labelContainer { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
| `; |
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 |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| export { AmountSelector } from './amount-selector'; | ||
| export { NetworkSelector } from './network-selector'; | ||
| export { AddressInput } from './address-input'; |
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
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
Oops, something went wrong.