Skip to content

Commit 12482bb

Browse files
DanutIlieDanutIlie
authored
Merge pull request #58 from multiversx/development
Development
2 parents 15aadec + 8b5efca commit 12482bb

File tree

17 files changed

+352
-120
lines changed

17 files changed

+352
-120
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [[0.0.0-alpha.7](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/58)] - 2025-03-18
11+
12+
- [Refactor package compile](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/57)
13+
- [Added gasPrice PPU editing radios](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/56)
14+
- [Added gasPrice editing radios](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/52)
15+
- [Added notifications feed side panel](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/50)
16+
- [Added Tailwind CSS support](https://github.com/multiversx/mx-sdk-dapp-core/pull/47)
17+
1018
## [[0.0.0-alpha.6](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/53)] - 2025-03-12
1119

1220
- [Added notifications feed side panel](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/50)
@@ -17,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1725

1826
- [Added ability to expand/collapse transactions in toast](https://github.com/multiversx/mx-sdk-dapp-core/pull/48)
1927
- [Added ability to close modal on Escape](https://github.com/multiversx/mx-sdk-dapp-core/pull/46)
28+
- [Added wallet connect side panel component](https://github.com/multiversx/mx-sdk-dapp-core/pull/45)
2029
- [Added missing components from excludeComponents stancil config](https://github.com/multiversx/mx-sdk-dapp-core/pull/44)
2130
- [Added wallet connect side panel support](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/43)
2231
- [Added unlock panel](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/42)

‎package.json‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@multiversx/sdk-dapp-core-ui",
3-
"version": "0.0.0-alpha.6",
3+
"version": "0.0.0-alpha.7",
44
"description": "A library to hold UI components for a dApp on the MultiversX blockchain",
55
"author": "MultiversX",
66
"license": "MIT",
@@ -12,12 +12,9 @@
1212
"unpkg": "dist/components/sdk-dapp-core-ui.esm.js",
1313
"exports": {
1414
".": {
15-
"import": "./dist/components/sdk-dapp-core-ui.esm.js",
16-
"require": "./dist/components/sdk-dapp-core-ui.cjs.js"
17-
},
18-
"./dist/*": {
19-
"import": "./dist/*",
20-
"types": "./dist/*"
15+
"import": "./dist/index.js",
16+
"require": "./dist/index.cjs.js",
17+
"types": "./dist/types/index.d.ts"
2118
},
2219
"./components/*": {
2320
"import": "./dist/components/*.js",

‎src/components.d.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,8 @@ export namespace Components {
158158
"class"?: string;
159159
"direction": string;
160160
}
161+
interface TransactionFeeComponent {
162+
}
161163
interface TransactionHash {
162164
"class"?: string;
163165
"transaction": ITransactionsTableRow;
@@ -239,7 +241,7 @@ export namespace Components {
239241
}
240242
interface WalletConnect {
241243
"data": IWalletConnectModalData;
242-
"getEventBus": () => Promise<import("/Users/iliedaniel/Projects/sdk-dapp-core-workspace/packages/mx-sdk-dapp-core-ui/src/components").IEventBus>;
244+
"getEventBus": () => Promise<IEventBus>;
243245
}
244246
interface WalletConnectBody {
245247
"description": string;
@@ -543,6 +545,12 @@ declare global {
543545
prototype: HTMLTransactionDirectionBadgeElement;
544546
new (): HTMLTransactionDirectionBadgeElement;
545547
};
548+
interface HTMLTransactionFeeComponentElement extends Components.TransactionFeeComponent, HTMLStencilElement {
549+
}
550+
var HTMLTransactionFeeComponentElement: {
551+
prototype: HTMLTransactionFeeComponentElement;
552+
new (): HTMLTransactionFeeComponentElement;
553+
};
546554
interface HTMLTransactionHashElement extends Components.TransactionHash, HTMLStencilElement {
547555
}
548556
var HTMLTransactionHashElement: {
@@ -738,6 +746,7 @@ declare global {
738746
"transaction-account-name": HTMLTransactionAccountNameElement;
739747
"transaction-age": HTMLTransactionAgeElement;
740748
"transaction-direction-badge": HTMLTransactionDirectionBadgeElement;
749+
"transaction-fee-component": HTMLTransactionFeeComponentElement;
741750
"transaction-hash": HTMLTransactionHashElement;
742751
"transaction-icon": HTMLTransactionIconElement;
743752
"transaction-list-item": HTMLTransactionListItemElement;
@@ -887,6 +896,8 @@ declare namespace LocalJSX {
887896
"class"?: string;
888897
"direction"?: string;
889898
}
899+
interface TransactionFeeComponent {
900+
}
890901
interface TransactionHash {
891902
"class"?: string;
892903
"transaction"?: ITransactionsTableRow;
@@ -1011,6 +1022,7 @@ declare namespace LocalJSX {
10111022
"transaction-account-name": TransactionAccountName;
10121023
"transaction-age": TransactionAge;
10131024
"transaction-direction-badge": TransactionDirectionBadge;
1025+
"transaction-fee-component": TransactionFeeComponent;
10141026
"transaction-hash": TransactionHash;
10151027
"transaction-icon": TransactionIcon;
10161028
"transaction-list-item": TransactionListItem;
@@ -1065,6 +1077,7 @@ declare module "@stencil/core" {
10651077
"transaction-account-name": LocalJSX.TransactionAccountName & JSXBase.HTMLAttributes<HTMLTransactionAccountNameElement>;
10661078
"transaction-age": LocalJSX.TransactionAge & JSXBase.HTMLAttributes<HTMLTransactionAgeElement>;
10671079
"transaction-direction-badge": LocalJSX.TransactionDirectionBadge & JSXBase.HTMLAttributes<HTMLTransactionDirectionBadgeElement>;
1080+
"transaction-fee-component": LocalJSX.TransactionFeeComponent & JSXBase.HTMLAttributes<HTMLTransactionFeeComponentElement>;
10681081
"transaction-hash": LocalJSX.TransactionHash & JSXBase.HTMLAttributes<HTMLTransactionHashElement>;
10691082
"transaction-icon": LocalJSX.TransactionIcon & JSXBase.HTMLAttributes<HTMLTransactionIconElement>;
10701083
"transaction-list-item": LocalJSX.TransactionListItem & JSXBase.HTMLAttributes<HTMLTransactionListItemElement>;

‎src/components/functional/sign-transactions-modal/components/fungible-component/readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
```mermaid
1616
graph TD;
1717
fungible-component --> sign-transaction-component
18+
sign-transaction-component --> transaction-fee-component
1819
style fungible-component fill:#f9f,stroke:#333,stroke-width:4px
1920
```
2021

‎src/components/functional/sign-transactions-modal/components/sign-transaction-component/components/transaction-fee-component/readme.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# transaction-fee-component
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Dependencies
9+
10+
### Used by
11+
12+
- [sign-transaction-component](../..)
13+
14+
### Graph
15+
```mermaid
16+
graph TD;
17+
sign-transaction-component --> transaction-fee-component
18+
style transaction-fee-component fill:#f9f,stroke:#333,stroke-width:4px
19+
```
20+
21+
----------------------------------------------
22+
23+
*Built with [StencilJS](https://stenciljs.com/)*

‎src/components/functional/sign-transactions-modal/components/sign-transaction-component/components/transaction-fee-component/transaction-fee-component.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.transaction-fee-container {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: flex-start;
11+
gap: 4px;
12+
line-height: 1;
13+
padding: 16px;
14+
border-radius: 8px;
15+
background: var(--white);
16+
}
17+
18+
.fee-header {
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
margin-bottom: 8px;
23+
}
24+
25+
.edit-button {
26+
background: none;
27+
border: none;
28+
cursor: pointer;
29+
padding: 4px;
30+
color: var(--text-secondary);
31+
}
32+
33+
.edit-button:hover {
34+
color: var(--text-primary);
35+
}
36+
37+
.gas-options {
38+
margin-top: 16px;
39+
padding-top: 16px;
40+
border-top: 1px solid var(--border-color);
41+
padding: 1rem;
42+
background: #f8f9fa;
43+
border-radius: 8px;
44+
width: 100%;
45+
}
46+
47+
.top-section {
48+
display: flex;
49+
justify-content: space-between;
50+
align-items: center;
51+
margin-bottom: 1rem;
52+
}
53+
54+
.gas-price-section .label,
55+
.gas-limit-section .label {
56+
color: #6c757d;
57+
font-size: 0.875rem;
58+
margin-bottom: 0.25rem;
59+
}
60+
61+
.gas-price-section .value,
62+
.gas-limit-section .value {
63+
display: flex;
64+
align-items: center;
65+
font-size: 1rem;
66+
font-weight: 500;
67+
color: #212529;
68+
margin: 0;
69+
}
70+
71+
.gas-limit-section {
72+
padding-top: 1rem;
73+
border-top: 1px solid #dee2e6;
74+
}
75+
76+
.radio-group {
77+
display: inline-flex;
78+
border: 1px solid #dee2e6;
79+
border-radius: 4px;
80+
overflow: hidden;
81+
margin-left: 12px;
82+
}
83+
84+
.radio-option {
85+
position: relative;
86+
}
87+
88+
.radio-option input[type="radio"] {
89+
position: absolute;
90+
opacity: 0;
91+
width: 0;
92+
height: 0;
93+
}
94+
95+
.radio-option input[type="radio"]:checked + label {
96+
background: #0d6efd;
97+
color: white;
98+
}
99+
100+
.radio-option label {
101+
display: inline-block;
102+
padding: 4px 8px;
103+
font-size: 12px;
104+
cursor: pointer;
105+
border-right: 1px solid #dee2e6;
106+
transition: all 0.2s ease;
107+
}
108+
109+
.radio-option label:hover {
110+
background: #e9ecef;
111+
}
112+
113+
.radio-option:last-child label {
114+
border-right: none;
115+
}

‎src/components/functional/sign-transactions-modal/components/sign-transaction-component/components/transaction-fee-component/transaction-fee-component.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Component, h, State } from '@stencil/core';
2+
3+
import type { ISignTransactionsModalCommonData } from '../../../../sign-transactions-modal.types';
4+
import state from '../../../../signTransactionsModalStore';
5+
6+
@Component({
7+
tag: 'transaction-fee-component',
8+
styleUrl: 'transaction-fee-component.css',
9+
shadow: true,
10+
})
11+
export class TransactionFeeComponent {
12+
@State() showGasOptions = false;
13+
14+
private toggleGasOptions = () => {
15+
this.showGasOptions = !this.showGasOptions;
16+
};
17+
18+
private handlePpuChange = (value: ISignTransactionsModalCommonData['ppu']) => () => {
19+
state.onSetPpu(value);
20+
};
21+
22+
render() {
23+
const { egldLabel, feeInFiatLimit, feeLimit, gasLimit, gasPrice, ppu, isEditable, ppuOptions } = state.commonData;
24+
25+
return (
26+
<div class="transaction-fee-container">
27+
<div class="fee-header">
28+
<p>Transaction fee</p>
29+
{isEditable && (
30+
<button onClick={this.toggleGasOptions} class="edit-button">
31+
Edit
32+
</button>
33+
)}
34+
</div>
35+
{feeLimit && (
36+
<p>
37+
<span>{feeLimit}</span>&nbsp;
38+
<span>{egldLabel}</span>
39+
</p>
40+
)}
41+
<p>≈{feeInFiatLimit}</p>
42+
43+
{this.showGasOptions && (
44+
<div class="gas-options">
45+
<div class="top-section">
46+
<div class="gas-price-section">
47+
<div class="label">Gas Price</div>
48+
<div class="value">{gasPrice}</div>
49+
</div>
50+
51+
{ppuOptions && ppuOptions.length > 0 && (
52+
<div class="radio-group">
53+
{ppuOptions.map(option => (
54+
<div class="radio-option">
55+
<input
56+
disabled={!isEditable}
57+
type="radio"
58+
id={`ppu${option.value}`}
59+
name="ppu"
60+
value={option.value}
61+
checked={ppu === option.value}
62+
onChange={this.handlePpuChange(option.value)}
63+
/>
64+
<label htmlFor={`ppu${option.value}`}>{option.label}</label>
65+
</div>
66+
))}
67+
</div>
68+
)}
69+
</div>
70+
71+
<div class="gas-limit-section">
72+
<div class="label">Gas Limit</div>
73+
<div class="value">{gasLimit}</div>
74+
</div>
75+
</div>
76+
)}
77+
</div>
78+
);
79+
}
80+
}

‎src/components/functional/sign-transactions-modal/components/sign-transaction-component/readme.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,14 @@
1919
- [fungible-component](../fungible-component)
2020
- [token-component](../token-component)
2121

22+
### Depends on
23+
24+
- [transaction-fee-component](./components/transaction-fee-component)
25+
2226
### Graph
2327
```mermaid
2428
graph TD;
29+
sign-transaction-component --> transaction-fee-component
2530
fungible-component --> sign-transaction-component
2631
token-component --> sign-transaction-component
2732
style sign-transaction-component fill:#f9f,stroke:#333,stroke-width:4px

‎src/components/functional/sign-transactions-modal/components/sign-transaction-component/sign-transaction-component.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,6 @@
4848
opacity: 0.6;
4949
}
5050

51-
.fee-container {
52-
display: flex;
53-
flex-direction: column;
54-
align-items: flex-start;
55-
gap: 4px;
56-
line-height: 1;
57-
}
58-
5951
.sign-button-container {
6052
display: flex;
6153
flex-direction: column;

0 commit comments

Comments
 (0)