machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4601 from mempool/natsee/seach-bar-liquid-assets

Browse Source 
Search bar: suggest Liquid assets
This commit is contained in:
softsimon 2024-01-23 20:07:06 +07:00 committed by GitHub
commit de7db08ae3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/search-form/search-form.component.scss
View File

@ -1,15 +1,11 @@
:host ::ng-deep { :host ::ng-deep {
.dropdown-item { .dropdown-item {
white-space: nowrap; white-space: nowrap;
width: calc(100% - 34px);
} }
.dropdown-menu { .dropdown-menu {
width: calc(100% - 34px); width: calc(100% - 34px);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.dropdown-item {
width: 410px;
}
.dropdown-menu { .dropdown-menu {
width: 410px; width: 410px;
} }

15
frontend/src/app/components/search-form/search-form.component.ts
View File

@ -170,6 +170,7 @@ export class SearchFormComponent implements OnInit {
addresses: [], addresses: [],
nodes: [], nodes: [],
channels: [], channels: [],
liquidAsset: [],
}; };
} }
@ -187,6 +188,7 @@ export class SearchFormComponent implements OnInit {
const matchesBlockHash = this.regexBlockhash.test(searchText); const matchesBlockHash = this.regexBlockhash.test(searchText);
let matchesAddress = !matchesTxId && this.regexAddress.test(searchText); let matchesAddress = !matchesTxId && this.regexAddress.test(searchText);
const otherNetworks = findOtherNetworks(searchText, this.network as any || 'mainnet', this.env); const otherNetworks = findOtherNetworks(searchText, this.network as any || 'mainnet', this.env);
const liquidAsset = this.assets ? (this.assets[searchText] || []) : [];
// Add B prefix to addresses in Bisq network // Add B prefix to addresses in Bisq network
if (!matchesAddress && this.network === 'bisq' && getRegex('address', 'mainnet').test(searchText)) { if (!matchesAddress && this.network === 'bisq' && getRegex('address', 'mainnet').test(searchText)) {
@ -211,6 +213,7 @@ export class SearchFormComponent implements OnInit {
otherNetworks: otherNetworks, otherNetworks: otherNetworks,
nodes: lightningResults.nodes, nodes: lightningResults.nodes,
channels: lightningResults.channels, channels: lightningResults.channels,
liquidAsset: liquidAsset,
}; };
}) })
); );
@ -259,16 +262,16 @@ export class SearchFormComponent implements OnInit {
} else if (this.regexTransaction.test(searchText)) { } else if (this.regexTransaction.test(searchText)) {
const matches = this.regexTransaction.exec(searchText); const matches = this.regexTransaction.exec(searchText);
if (this.network === 'liquid' || this.network === 'liquidtestnet') { if (this.network === 'liquid' || this.network === 'liquidtestnet') {
if (this.assets[matches[1]]) { if (this.assets[matches[0]]) {
this.navigate('/assets/asset/', matches[1]); this.navigate('/assets/asset/', matches[0]);
} }
this.electrsApiService.getAsset$(matches[1]) this.electrsApiService.getAsset$(matches[0])
.subscribe( .subscribe(
() => { this.navigate('/assets/asset/', matches[1]); }, () => { this.navigate('/assets/asset/', matches[0]); },
() => { () => {
this.electrsApiService.getBlock$(matches[1]) this.electrsApiService.getBlock$(matches[0])
.subscribe( .subscribe(
(block) => { this.navigate('/block/', matches[1], { state: { data: { block } } }); }, (block) => { this.navigate('/block/', matches[0], { state: { data: { block } } }); },
() => { this.navigate('/tx/', matches[0]); }); () => { this.navigate('/tx/', matches[0]); });
} }
); );

24
frontend/src/app/components/search-form/search-results/search-results.component.html
View File

@ -1,6 +1,6 @@
<div class="dropdown-menu show" *ngIf="results" [hidden]="!results.hashQuickMatch && !results.otherNetworks.length && !results.addresses.length && !results.nodes.length && !results.channels.length"> <div class="dropdown-menu show" *ngIf="results" [hidden]="!results.hashQuickMatch && !results.otherNetworks.length && !results.addresses.length && !results.nodes.length && !results.channels.length && !results.liquidAsset.length">
<ng-template [ngIf]="results.blockHeight"> <ng-template [ngIf]="results.blockHeight">
<div class="card-title" i18n="search.bitcoin-block-height">Bitcoin Block Height</div> <div class="card-title" i18n="search.bitcoin-block-height">{{ networkName }} Block Height</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container>
</button> </button>
@ -17,20 +17,20 @@
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container>
</button> </button>
</ng-template> </ng-template>
<ng-template [ngIf]="results.txId"> <ng-template [ngIf]="results.txId && !results.liquidAsset.length">
<div class="card-title" i18n="search.bitcoin-transaction">Bitcoin Transaction</div> <div class="card-title" i18n="search.bitcoin-transaction">{{ networkName }} Transaction</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
</button> </button>
</ng-template> </ng-template>
<ng-template [ngIf]="results.address"> <ng-template [ngIf]="results.address">
<div class="card-title" i18n="search.bitcoin-address">Bitcoin Address</div> <div class="card-title" i18n="search.bitcoin-address">{{ networkName }} Address</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 20 : 30 }"></ng-container> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 17 : 30 }"></ng-container>
</button> </button>
</ng-template> </ng-template>
<ng-template [ngIf]="results.blockHash"> <ng-template [ngIf]="results.blockHash">
<div class="card-title" i18n="search.bitcoin-block">Bitcoin Block</div> <div class="card-title" i18n="search.bitcoin-block">{{ networkName }} Block</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
</button> </button>
@ -39,12 +39,12 @@
<div class="card-title danger" i18n="search.other-networks">Other Network Address</div> <div class="card-title danger" i18n="search.other-networks">Other Network Address</div>
<ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index"> <ng-template ngFor [ngForOf]="results.otherNetworks" let-otherNetwork let-i="index">
<button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" [class.inactive]="!otherNetwork.isNetworkAvailable" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 20 : 25 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b> <ng-container *ngTemplateOutlet="goTo; context: { $implicit: otherNetwork.address| shortenString : isMobile ? 12 : 20 }"></ng-container>&nbsp;<b>({{ otherNetwork.network.charAt(0).toUpperCase() + otherNetwork.network.slice(1) }})</b>
</button> </button>
</ng-template> </ng-template>
</ng-template> </ng-template>
<ng-template [ngIf]="results.addresses.length"> <ng-template [ngIf]="results.addresses.length">
<div class="card-title" i18n="search.bitcoin-addresses">Bitcoin Addresses</div> <div class="card-title" i18n="search.bitcoin-addresses">{{ networkName }} Addresses</div>
<ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index"> <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
<button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + i)" [class.active]="(results.hashQuickMatch + results.otherNetworks.length + i) === activeIdx" type="button" role="option" class="dropdown-item"> <button (click)="clickItem(results.hashQuickMatch + results.otherNetworks.length + i)" [class.active]="(results.hashQuickMatch + results.otherNetworks.length + i) === activeIdx" type="button" role="option" class="dropdown-item">
<ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight> <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
@ -67,6 +67,12 @@
</button> </button>
</ng-template> </ng-template>
</ng-template> </ng-template>
<ng-template [ngIf]="results.liquidAsset.length">
<div class="card-title" i18n="search.liquid-asset">Liquid Asset</div>
<button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
<ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 11 }"></ng-container>&nbsp;<b>({{ results.liquidAsset[1] }})</b>
</button>
</ng-template>
</div> </div>
<ng-template #goTo let-x i18n="search.go-to">Go to "{{ x }}"</ng-template> <ng-template #goTo let-x i18n="search.go-to">Go to "{{ x }}"</ng-template>

7
frontend/src/app/components/search-form/search-results/search-results.component.ts
View File

@ -10,15 +10,20 @@ export class SearchResultsComponent implements OnChanges {
@Input() results: any = {}; @Input() results: any = {};
@Output() selectedResult = new EventEmitter(); @Output() selectedResult = new EventEmitter();
isMobile = (window.innerWidth <= 767.98); isMobile = (window.innerWidth <= 1150);
resultsFlattened = []; resultsFlattened = [];
activeIdx = 0; activeIdx = 0;
focusFirst = true; focusFirst = true;
networkName = '';
constructor( constructor(
public stateService: StateService, public stateService: StateService,
) { } ) { }
ngOnInit() {
this.networkName = this.stateService.network.charAt(0).toUpperCase() + this.stateService.network.slice(1);
}
ngOnChanges() { ngOnChanges() {
this.activeIdx = 0; this.activeIdx = 0;
if (this.results) { if (this.results) {