Skip to content

Commit 78c981e

Browse files
aimensahnounaimensahnoun
committed
feat: optimize request content data to accomodate fees
1 parent 1c33591 commit 78c981e

File tree

3 files changed

+153
-56
lines changed

3 files changed

+153
-56
lines changed

‎packages/payment-widget/src/lib/components/payment-confirmation.svelte‎

Lines changed: 70 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -151,39 +151,43 @@
151151
>
152152
</div>
153153
</div>
154-
<div class="payment-confirmation-tab payment-confirmation-seller-address">
154+
<div class="payment-confirmation-tab payment-confirmation-address">
155155
<h4>Payment to</h4>
156-
<a
157-
href={getExplorerUrl(selectedCurrency.network, sellerAddress)}
158-
target="_blank"
159-
>
160-
<span>{sellerAddress}</span>
161-
</a>
162-
<button
163-
on:click={() => {
164-
navigator.clipboard.writeText(sellerAddress);
165-
}}
166-
>
167-
<CopyIcon />
168-
</button>
169-
</div>
170-
{#if feeAddress !== ethers.constants.AddressZero && feeAmountInUSD > 0}
171-
<div class="payment-confirmation-tab">
172-
<h4>Fee to</h4>
156+
<div class="address-container">
173157
<a
174-
href={getExplorerUrl(selectedCurrency.network, feeAddress)}
158+
href={getExplorerUrl(selectedCurrency.network, sellerAddress)}
175159
target="_blank"
176160
>
177-
<span>{feeAddress}</span>
161+
<span>{sellerAddress}</span>
178162
</a>
179163
<button
180164
on:click={() => {
181-
navigator.clipboard.writeText(feeAddress);
165+
navigator.clipboard.writeText(sellerAddress);
182166
}}
183167
>
184168
<CopyIcon />
185169
</button>
186170
</div>
171+
</div>
172+
{#if feeAddress !== ethers.constants.AddressZero && feeAmountInUSD > 0}
173+
<div class="payment-confirmation-tab payment-confirmation-address">
174+
<h4>Fee to</h4>
175+
<div class="address-container">
176+
<a
177+
href={getExplorerUrl(selectedCurrency.network, feeAddress)}
178+
target="_blank"
179+
>
180+
<span>{feeAddress}</span>
181+
</a>
182+
<button
183+
on:click={() => {
184+
navigator.clipboard.writeText(feeAddress);
185+
}}
186+
>
187+
<CopyIcon />
188+
</button>
189+
</div>
190+
</div>
187191
<div class="payment-confirmation-tab">
188192
<h4>Fee Amount</h4>
189193
<span>
@@ -254,7 +258,8 @@
254258
sellerInfo,
255259
buyerInfo,
256260
payerAddress,
257-
amountInCrypto: totalPayment,
261+
amountInCrypto,
262+
totalAmountInCrypto: totalPayment,
258263
exchangeRate,
259264
amountInUSD,
260265
builderId,
@@ -320,23 +325,6 @@
320325
width: 100%;
321326
gap: 16px;
322327
323-
.payment-confirmation-seller-address {
324-
display: flex;
325-
align-items: center;
326-
gap: 2px;
327-
font-size: 12px;
328-
329-
button {
330-
background: none;
331-
border: none;
332-
padding: 0;
333-
margin: 0;
334-
cursor: pointer;
335-
display: inline-flex;
336-
align-items: center;
337-
justify-content: center;
338-
}
339-
}
340328
&-amount-info {
341329
display: flex;
342330
align-items: center;
@@ -385,6 +373,49 @@
385373
font-weight: 500;
386374
font-size: 14px;
387375
}
376+
377+
&.payment-confirmation-address {
378+
flex-direction: column;
379+
align-items: flex-start;
380+
gap: 8px;
381+
382+
h4 {
383+
margin: 0;
384+
}
385+
386+
.address-container {
387+
display: flex;
388+
align-items: center;
389+
gap: 8px;
390+
width: 100%;
391+
392+
a {
393+
flex-grow: 1;
394+
text-decoration: none;
395+
color: inherit;
396+
font-size: 14px;
397+
398+
span {
399+
display: inline-block;
400+
width: 100%;
401+
overflow: hidden;
402+
text-overflow: ellipsis;
403+
white-space: nowrap;
404+
}
405+
}
406+
407+
button {
408+
background: none;
409+
border: none;
410+
padding: 0;
411+
margin: 0;
412+
cursor: pointer;
413+
display: flex;
414+
align-items: center;
415+
justify-content: center;
416+
}
417+
}
418+
}
388419
}
389420
390421
&-warning {

‎packages/payment-widget/src/lib/payment-widget.svelte‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@
196196

197197
<section class="rn-payment-widget-body">
198198
<h2>Pay with crypto</h2>
199-
<Button
199+
<button
200200
disabled={!amountInUSD ||
201201
!sellerAddress ||
202202
amountInUSD === 0 ||
@@ -207,7 +207,7 @@
207207
} else {
208208
isModalOpen = true;
209209
}
210-
}}>Pay</Button
210+
}}>Pay</button
211211
>
212212
</section>
213213
<Modal
@@ -372,6 +372,41 @@
372372
height: 100%;
373373
border-radius: 0px 0px 20px 20px;
374374
375+
button {
376+
display: inline-flex;
377+
cursor: pointer;
378+
align-items: center;
379+
justify-content: center;
380+
white-space: nowrap;
381+
border-radius: 0.375rem;
382+
font-size: 0.875rem;
383+
font-weight: 500;
384+
transition-property: color, background-color, border-color,
385+
text-decoration-color, fill, stroke;
386+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
387+
transition-duration: 150ms;
388+
background-color: #0bb489;
389+
color: white;
390+
padding: 0.5rem 1rem;
391+
border: none;
392+
outline: none;
393+
394+
&:focus-visible {
395+
outline: 2px solid transparent;
396+
outline-offset: 2px;
397+
box-shadow: 0 0 0 2px var(--ring-color, #000);
398+
}
399+
400+
&:disabled {
401+
pointer-events: none;
402+
opacity: 0.5;
403+
}
404+
405+
&:hover {
406+
background-color: rgba($color: #0bb489, $alpha: 0.8);
407+
}
408+
}
409+
375410
h2 {
376411
color: black;
377412
font-size: 18px;

‎packages/payment-widget/src/lib/utils/request.ts‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const prepareRequestParameters = ({
3030
feeAddress,
3131
feeAmountInUSD,
3232
feeAmountInCrypto,
33+
totalAmountInCrypto,
3334
}: {
3435
currency: Currency;
3536
sellerAddress: string;
@@ -46,17 +47,59 @@ export const prepareRequestParameters = ({
4647
feeAddress: string;
4748
feeAmountInUSD: number;
4849
feeAmountInCrypto: number;
50+
totalAmountInCrypto: number;
4951
}) => {
5052
const isERC20 = currency.type === Types.RequestLogic.CURRENCY.ERC20;
5153
const currencyValue = isERC20 ? currency.address : "eth";
5254
const amount = utils
53-
.parseUnits(amountInCrypto.toFixed(currency.decimals), currency.decimals)
55+
.parseUnits(
56+
totalAmountInCrypto.toFixed(currency.decimals),
57+
currency.decimals
58+
)
5459
.toString();
5560

5661
let note = `Sale made with ${currency.symbol} on ${currency.network} for amount of ${amountInUSD} USD with an exchange rate of ${exchangeRate}. `;
5762

5863
if (feeAddress !== constants.AddressZero && feeAmountInUSD) {
59-
note += `Fee of ${feeAmountInUSD} USD and ${feeAmountInCrypto} ${currency.symbol} was paid by the buyer to ${feeAddress}.`;
64+
note += `Fee of ${feeAmountInUSD} USD/${feeAmountInCrypto} ${currency.symbol} was paid by the buyer to ${feeAddress}.`;
65+
}
66+
67+
const invoiceItems = [
68+
{
69+
name: productInfo?.name || "Unnamed product",
70+
quantity: 1,
71+
unitPrice: utils
72+
.parseUnits(
73+
amountInCrypto.toFixed(currency.decimals),
74+
currency.decimals
75+
)
76+
.toString(),
77+
discount: "0",
78+
tax: {
79+
type: "percentage",
80+
amount: "0",
81+
},
82+
currency: isERC20 ? currency.address : currency.symbol,
83+
},
84+
];
85+
86+
if (feeAmountInCrypto > 0) {
87+
invoiceItems.push({
88+
name: "Fee",
89+
quantity: 1,
90+
unitPrice: utils
91+
.parseUnits(
92+
feeAmountInCrypto.toFixed(currency.decimals),
93+
currency.decimals
94+
)
95+
.toString(),
96+
discount: "0",
97+
tax: {
98+
type: "percentage",
99+
amount: "0",
100+
},
101+
currency: isERC20 ? currency.address : currency.symbol,
102+
});
60103
}
61104

62105
return {
@@ -133,19 +176,7 @@ export const prepareRequestParameters = ({
133176
: undefined,
134177
taxRegistration: buyerInfo?.taxRegistration || undefined,
135178
},
136-
invoiceItems: [
137-
{
138-
name: productInfo?.name || "Unnamed product",
139-
quantity: 1,
140-
unitPrice: amount,
141-
discount: "0",
142-
tax: {
143-
type: "percentage",
144-
amount: "0",
145-
},
146-
currency: isERC20 ? currency.address : currency.symbol,
147-
},
148-
],
179+
invoiceItems,
149180
paymentTerms: {
150181
dueDate: new Date().toISOString(),
151182
},

0 commit comments

Comments
 (0)