Skip to content

Commit 4074b10

Browse files
rodrigopavezicoderabbitai[bot]MantisClone
authored
feat: conversion payments (#141)
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: MantisClone <david.huntmateo@request.network>
1 parent 949d045 commit 4074b10

File tree

17 files changed

+1910
-110
lines changed

17 files changed

+1910
-110
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
],
1111
"scripts": {
1212
"test": "echo \"Error: no test specified\" && exit 1",
13+
"clean": "find . -path './node_modules' -prune -o -name 'dist' -type d -exec rm -rf '{}' \\; -printf '%p deleted\\n' 2>/dev/null",
1314
"deep-clean": "find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \\;",
1415
"build": "turbo run build",
1516
"build:form": "turbo run build --filter=@requestnetwork/create-invoice-form",

‎packages/create-invoice-form/src/lib/create-invoice-form.svelte‎

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@
88
import type { IConfig } from "@requestnetwork/shared-types";
99
import { APP_STATUS } from "@requestnetwork/shared-types/enums";
1010
import type { RequestNetwork } from "@requestnetwork/request-client.js";
11+
import { Types } from "@requestnetwork/request-client.js";
12+
import { CurrencyTypes } from "@requestnetwork/types";
1113
// Utils
1214
import { getInitialFormData, prepareRequestParams } from "./utils";
1315
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
1416
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
15-
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
17+
import {
18+
getCurrencySupportedNetworksForConversion,
19+
initializeCurrencyManager,
20+
} from "@requestnetwork/shared-utils/initCurrencyManager";
1621
// Components
1722
import { InvoiceForm, InvoiceView } from "./invoice";
1823
import Button from "@requestnetwork/shared-components/button.svelte";
@@ -34,26 +39,34 @@
3439
const extractUniqueNetworkNames = (): string[] => {
3540
const networkSet = new Set<string>();
3641
37-
currencyManager.knownCurrencies.forEach((currency: any) => {
38-
networkSet.add(currency.network);
39-
});
42+
currencyManager.knownCurrencies.forEach(
43+
(currency: CurrencyTypes.CurrencyDefinition) => {
44+
if (currency.network) {
45+
networkSet.add(currency.network);
46+
}
47+
}
48+
);
4049
4150
return Array.from(networkSet);
4251
};
4352
44-
let networks = extractUniqueNetworkNames();
53+
let networks: string[] = extractUniqueNetworkNames();
4554
46-
let network = networks[0];
55+
let network: string | undefined = undefined;
56+
let currency: CurrencyTypes.CurrencyDefinition | undefined = undefined;
57+
let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined = undefined;
4758
48-
const handleNetworkChange = (network: string) => {
49-
if (network) {
59+
const handleNetworkChange = (newNetwork: string) => {
60+
if (newNetwork) {
5061
const newCurrencies = currencyManager.knownCurrencies.filter(
51-
(currency: any) => currency.network === network
62+
(currency: CurrencyTypes.CurrencyDefinition) =>
63+
currency.type === Types.RequestLogic.CURRENCY.ISO4217 ||
64+
currency.network === newNetwork
5265
);
5366
54-
network = network;
67+
network = newNetwork;
5568
defaultCurrencies = newCurrencies;
56-
currency = newCurrencies[0];
69+
currency = undefined;
5770
}
5871
};
5972
@@ -62,12 +75,33 @@
6275
let appStatus: APP_STATUS[] = [];
6376
let formData = getInitialFormData();
6477
let defaultCurrencies = currencyManager.knownCurrencies.filter(
65-
(currency: any) => currency.network === network
78+
(currency: CurrencyTypes.CurrencyDefinition) =>
79+
currency.type === Types.RequestLogic.CURRENCY.ISO4217 || network
80+
? currency.network === network
81+
: true
6682
);
6783
68-
let currency = defaultCurrencies[0];
84+
const handleInvoiceCurrencyChange = (
85+
value: CurrencyTypes.CurrencyDefinition
86+
) => {
87+
invoiceCurrency = value;
88+
network = undefined;
89+
currency = undefined;
90+
91+
if (
92+
invoiceCurrency &&
93+
invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
94+
) {
95+
networks = getCurrencySupportedNetworksForConversion(
96+
invoiceCurrency.hash,
97+
currencyManager
98+
);
99+
} else {
100+
networks = extractUniqueNetworkNames();
101+
}
102+
};
69103
70-
const handleCurrencyChange = (value: string) => {
104+
const handleCurrencyChange = (value: CurrencyTypes.CurrencyDefinition) => {
71105
currency = value;
72106
};
73107
@@ -93,7 +127,14 @@
93127
94128
$: {
95129
const basicDetailsFilled =
96-
formData.payeeAddress && formData.payerAddress && formData.dueDate;
130+
formData.payeeAddress &&
131+
formData.payerAddress &&
132+
formData.dueDate &&
133+
formData.invoiceNumber &&
134+
formData.issuedOn &&
135+
invoiceCurrency &&
136+
currency &&
137+
formData.issuedOn;
97138
const hasItems =
98139
formData.invoiceItems.length > 0 &&
99140
formData.invoiceItems.every(isValidItem);
@@ -132,6 +173,7 @@
132173
const requestCreateParameters = prepareRequestParams({
133174
address: account?.address,
134175
formData,
176+
invoiceCurrency,
135177
currency,
136178
invoiceTotals,
137179
});
@@ -172,13 +214,19 @@
172214
bind:formData
173215
config={activeConfig}
174216
bind:defaultCurrencies
217+
{handleInvoiceCurrencyChange}
175218
{handleCurrencyChange}
176219
{handleNetworkChange}
177220
{networks}
221+
{currencyManager}
222+
{invoiceCurrency}
223+
{currency}
224+
{network}
178225
/>
179226
<div class="invoice-view-wrapper">
180227
<InvoiceView
181228
config={activeConfig}
229+
{invoiceCurrency}
182230
{currency}
183231
bind:formData
184232
bind:canSubmit

‎packages/create-invoice-form/src/lib/invoice/form-view.svelte‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
99
// Types
1010
import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";
11+
import { CurrencyTypes } from "@requestnetwork/types";
1112
1213
// Utils
1314
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
@@ -18,7 +19,8 @@
1819
export let config: IConfig;
1920
export let canSubmit = false;
2021
export let formData: CustomFormData;
21-
export let currency = defaultCurrencies[0];
22+
export let currency: CurrencyTypes.CurrencyDefinition | undefined;
23+
export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
2224
export let submitForm: (e: Event) => Promise<void>;
2325
export let invoiceTotals = {
2426
amountWithoutTax: 0,
@@ -164,16 +166,15 @@
164166
</div>
165167
<p class="invoice-section-title">
166168
<span>Payment Chain</span>
167-
{currency.network[0].toUpperCase() + currency.network.slice(1)}
169+
{currency?.network ? currency.network.charAt(0).toUpperCase() + currency.network.slice(1).toLowerCase() : ""}
168170
</p>
169171
<p class="invoice-section-title">
170172
<span>Invoice Currency</span>
171-
{currency.symbol}
172-
({currency.network})
173+
{invoiceCurrency ? invoiceCurrency.symbol: ""}
173174
</p>
174175
<p class="invoice-section-title">
175-
<span>Invoice Type</span>
176-
Regular Invoice
176+
<span>Settlement Currency</span>
177+
{currency ? `${currency.symbol} (${currency.network})` : ""}
177178
</p>
178179
<div class="invoice-table-wrapper">
179180
<table class="invoice-table">
@@ -221,7 +222,7 @@
221222
>
222223
<span>Due: </span>
223224
<span
224-
>{currency.symbol}
225+
>{currency ? currency.symbol : ""}
225226
{" "}
226227
{invoiceTotals.totalAmount.toFixed(2)}</span
227228
>

‎packages/create-invoice-form/src/lib/invoice/form.svelte‎

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,26 @@
1717
import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
1818
import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
1919
import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
20+
import { Types } from "@requestnetwork/request-client.js";
21+
import { CurrencyTypes } from "@requestnetwork/types";
2022
import isEmail from "validator/es/lib/isEmail";
2123
2224
export let config: IConfig;
2325
export const invoiceNumber: number = 1;
2426
export let formData: CustomFormData;
27+
export let handleInvoiceCurrencyChange: (value: string) => void;
2528
export let handleCurrencyChange: (value: string) => void;
2629
2730
export let handleNetworkChange: (chainId: string) => void;
2831
export let networks;
2932
export let defaultCurrencies: any = [];
33+
export let currencyManager: any;
34+
export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
35+
export let currency:
36+
| CurrencyTypes.ERC20Currency
37+
| CurrencyTypes.NativeCurrency
38+
| undefined;
39+
export let network: any;
3040
3141
let validationErrors = {
3242
payeeAddress: false,
@@ -110,6 +120,21 @@
110120
}
111121
};
112122
123+
const filterSettlementCurrencies = (
124+
currency: CurrencyTypes.CurrencyDefinition
125+
) => {
126+
return invoiceCurrency
127+
? invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
128+
? currency.type !== Types.RequestLogic.CURRENCY.ISO4217 &&
129+
currencyManager?.getConversionPath(
130+
invoiceCurrency,
131+
currency,
132+
currency.network
133+
)?.length > 0
134+
: invoiceCurrency.hash === currency.hash
135+
: false;
136+
};
137+
113138
const addInvoiceItem = () => {
114139
const newItem = {
115140
name: "",
@@ -333,25 +358,45 @@
333358
</div>
334359
</Accordion>
335360
</div>
336-
<Dropdown
337-
{config}
338-
placeholder="Select payment chain"
339-
options={networks.map((network) => {
340-
return {
341-
value: network,
342-
label: network[0].toUpperCase() + network.slice(1),
343-
};
344-
})}
345-
onchange={handleNetworkChange}
346-
/>
347361

348362
<Dropdown
349363
{config}
350-
placeholder="Select a currency"
364+
selectedValue={invoiceCurrency
365+
? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
366+
: undefined}
367+
placeholder="Invoice currency (labeling)"
351368
options={defaultCurrencies.map((currency) => ({
352369
value: currency,
353-
label: `${currency.symbol} (${currency.network})`,
370+
label: `${currency.symbol} ${currency?.network ? `(${currency?.network})` : ""}`,
354371
}))}
372+
onchange={handleInvoiceCurrencyChange}
373+
/>
374+
<Dropdown
375+
{config}
376+
placeholder="Payment chain"
377+
selectedValue={network}
378+
options={networks
379+
.filter((networkItem) => networkItem)
380+
.map((networkItem) => {
381+
return {
382+
value: networkItem,
383+
label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
384+
};
385+
})}
386+
onchange={handleNetworkChange}
387+
/>
388+
<Dropdown
389+
{config}
390+
placeholder="Settlement currency"
391+
selectedValue={currency
392+
? `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`
393+
: undefined}
394+
options={defaultCurrencies
395+
.filter((currency) => filterSettlementCurrencies(currency))
396+
.map((currency) => ({
397+
value: currency,
398+
label: `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`,
399+
}))}
355400
onchange={handleCurrencyChange}
356401
/>
357402
<Input

0 commit comments

Comments
 (0)