Skip to content

Commit be0ec9d

Browse files
sstefdevsstefdev
authored
feat: integrated wagmi and wagmiConfig, improved data flow and state management (#150)
1 parent 3b2cf5e commit be0ec9d

File tree

14 files changed

+18015
-9075
lines changed

14 files changed

+18015
-9075
lines changed

‎package-lock.json‎

Lines changed: 17788 additions & 8872 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/create-invoice-form/README.md‎

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -20,57 +20,35 @@ npm install @requestnetwork/create-invoice-form
2020

2121
### Usage in React
2222

23-
> **⚠️ WARNING:** For NextJS 14.x , ensure you have the following configuration :
24-
>
25-
> #### [next.config.js](https://github.com/RequestNetwork/invoicing-template/blob/main/next.config.mjs)
26-
>
27-
> ```javascript
28-
> /** @type {import('next').NextConfig} */
29-
> const nextConfig = {
30-
> reactStrictMode: true,
31-
> swcMinify: false,
32-
> };
33-
> ```
34-
35-
> **⚠️ WARNING:** To use the Create Invoice Form in a React application, you must _dynamically_ import `@requestnetwork/create-invoice-form` and use the component in your JSX file.
36-
>
37-
> ```tsx
38-
> import("@requestnetwork/create-invoice-form");
39-
> ```
40-
41-
> **ℹ️ INFO:** The following example uses [Web3 Onboard](https://onboard.blocknative.com/) to connect a wallet but you can use any wallet connection method you prefer.
42-
4323
#### [create-invoice.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/create-invoice.tsx)
4424

45-
Configure the create-invoice-form web component by creating a reference to it, setting its properties, and passing the reference as a prop. It's not possible to pass objects into a web component as props directly. See [StackOverflow](https://stackoverflow.com/a/55480022) for details .
25+
You can directly pass props into the create-invoice-form web component without needing to create references or use workarounds.
4626

4727
```tsx
48-
import("@requestnetwork/create-invoice-form");
49-
import { useEffect, useRef } from "react";
28+
import Head from "next/head";
5029
import { config } from "@/utils/config";
5130
import { useAppContext } from "@/utils/context";
52-
import { CreateInvoiceFormProps } from "@/types";
53-
54-
export default function CreateInvoiceForm() {
55-
const formRef = useRef<CreateInvoiceFormProps>(null);
56-
const { wallet, requestNetwork } = useAppContext();
57-
58-
useEffect(() => {
59-
if (formRef.current) {
60-
formRef.current.config = config;
31+
import { currencies } from "@/utils/currencies";
32+
import { rainbowKitConfig as wagmiConfig } from "@/utils/wagmiConfig";
33+
import CreateInvoiceForm from "@requestnetwork/create-invoice-form/react";
6134

62-
if (wallet && requestNetwork) {
63-
formRef.current.signer = wallet.accounts[0].address;
64-
formRef.current.requestNetwork = requestNetwork;
65-
formRef.current.currencies = currencies;
66-
}
67-
}
68-
}, [wallet, requestNetwork]);
35+
export default function CreateInvoice() {
36+
const { requestNetwork } = useAppContext();
6937

7038
return (
71-
<div className="container m-auto w-[100%]">
72-
<create-invoice-form ref={formRef} />
73-
</div>
39+
<>
40+
<Head>
41+
<title>Request Invoicing - Create an Invoice</title>
42+
</Head>
43+
<div className="container m-auto w-[100%]">
44+
<CreateInvoiceForm
45+
config={config}
46+
currencies={currencies}
47+
wagmiConfig={wagmiConfig}
48+
requestNetwork={requestNetwork}
49+
/>
50+
</div>
51+
</>
7452
);
7553
}
7654
```
@@ -102,6 +80,12 @@ export const initializeRequestNetwork = (setter: any, walletClient: any) => {
10280
};
10381
```
10482

83+
#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/wagmiConfig.ts)
84+
85+
The wagmiConfig file configures wallet connections for the InvoiceDashboard component, using RainbowKit and supporting various wallets and blockchains.
86+
87+
For more details see [Wagmi Docs](https://wagmi.sh/react/api/WagmiProvider#config)
88+
10589
#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)
10690

10791
Use the config object to pass additional configuration options to the create invoice form component.
@@ -129,25 +113,25 @@ export const config: IConfig = {
129113

130114
## Features
131115

132-
| Feature | Status |
133-
| ------------------------------------------------ | ------ |
134-
| ERC20 Request | ✅ |
135-
| rnf_invoice format 0.3.0 | ✅ |
136-
| Configure Logo and Colors | ✅ |
137-
| Minimal Chains and Currencies | ✅ |
138-
| Support Wallet Connectors other than Web3Onboard | ❌ |
139-
| Native Request | ❌ |
140-
| Conversion Request | ❌ |
141-
| Swap-to-Pay Request | ❌ |
142-
| Swap-to-Conversion Request | ❌ |
143-
| Escrow Request | ❌ |
144-
| Improved UI and UX | ❌ |
145-
| Auto-increment Invoice Number | ❌ |
146-
| Client Address List | ❌ |
147-
| Payment Recipient Address List | ❌ |
148-
| More Chains and Currencies | ❌ |
149-
| More Configuration Options | ❌ |
150-
| Attachments | ❌ |
116+
| Feature | Status |
117+
| ------------------------------------ | ------ |
118+
| ERC20 Request | ✅ |
119+
| rnf_invoice format 0.3.0 | ✅ |
120+
| Configure Logo and Colors | ✅ |
121+
| Minimal Chains and Currencies | ✅ |
122+
| Compatible with all Wagmi connectors | ✅ |
123+
| Native Request | ❌ |
124+
| Conversion Request | ❌ |
125+
| Swap-to-Pay Request | ❌ |
126+
| Swap-to-Conversion Request | ❌ |
127+
| Escrow Request | ❌ |
128+
| Improved UI and UX | ❌ |
129+
| Auto-increment Invoice Number | ❌ |
130+
| Client Address List | ❌ |
131+
| Payment Recipient Address List | ❌ |
132+
| More Chains and Currencies | ❌ |
133+
| More Configuration Options | ❌ |
134+
| Attachments | ❌ |
151135

152136
## Chains and Currencies
153137

‎packages/create-invoice-form/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@requestnetwork/create-invoice-form",
3-
"version": "0.8.1",
3+
"version": "0.9.0",
44
"main": "./dist/web-component.umd.cjs",
55
"scripts": {
66
"dev": "vite dev",
@@ -33,7 +33,8 @@
3333
],
3434
"dependencies": {
3535
"@requestnetwork/request-client.js": "0.47.1-next.2043",
36-
"viem": "^2.9.15"
36+
"viem": "^2.9.15",
37+
"@wagmi/core": "^2.13.8"
3738
},
3839
"devDependencies": {
3940
"@sveltejs/vite-plugin-svelte": "^2.5.2",

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

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<svelte:options customElement="create-invoice-form" />
22

33
<script lang="ts">
4+
import { getAccount } from "@wagmi/core";
5+
import { Config as WagmiConfig } from "wagmi";
46
// Types
5-
import { APP_STATUS } from "@requestnetwork/shared-types/enums";
7+
import { type GetAccountReturnType } from "@wagmi/core";
68
import type { IConfig } from "@requestnetwork/shared-types";
7-
9+
import { APP_STATUS } from "@requestnetwork/shared-types/enums";
10+
import type { RequestNetwork } from "@requestnetwork/request-client.js";
811
// Utils
9-
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
12+
import { getInitialFormData, prepareRequestParams } from "./utils";
1013
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
14+
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
1115
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
12-
1316
// Components
17+
import { InvoiceForm, InvoiceView } from "./invoice";
1418
import Button from "@requestnetwork/shared-components/button.svelte";
1519
import Status from "@requestnetwork/shared-components/status.svelte";
1620
import Modal from "@requestnetwork/shared-components/modal.svelte";
1721
18-
import { InvoiceForm, InvoiceView } from "./invoice";
19-
import { getInitialFormData, prepareRequestParams } from "./utils";
20-
import type { RequestNetwork } from "@requestnetwork/request-client.js";
21-
2222
export let config: IConfig;
23-
export let signer: string = "";
23+
export let wagmiConfig: WagmiConfig;
2424
export let requestNetwork: RequestNetwork | null | undefined;
2525
export let currencies: any;
2626
27+
let account: GetAccountReturnType;
2728
let isTimeout = false;
2829
let activeConfig = config ? config : defaultConfig;
2930
let mainColor = activeConfig.colors.main;
@@ -77,7 +78,13 @@
7778
};
7879
7980
$: {
80-
formData.creatorId = signer;
81+
if (wagmiConfig) {
82+
account = getAccount(wagmiConfig);
83+
}
84+
}
85+
86+
$: {
87+
formData.creatorId = (account?.address ?? "") as string;
8188
invoiceTotals = calculateInvoiceTotals(formData.items);
8289
}
8390
@@ -130,7 +137,7 @@
130137
formData.miscellaneous.createdWith = window.location.hostname;
131138
132139
const requestCreateParameters = prepareRequestParams({
133-
signer,
140+
address: account?.address,
134141
formData,
135142
currency,
136143
invoiceTotals,

‎packages/create-invoice-form/src/lib/react/CreateInvoiceForm.ts‎ renamed to ‎packages/create-invoice-form/src/lib/react/CreateInvoiceForm.d.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from "react";
2+
import { Config as WagmiConfig } from "@wagmi/core";
23
import type { IConfig } from "@requestnetwork/shared-types";
34
import type { RequestNetwork, Types } from "@requestnetwork/request-client.js";
5+
46
export interface CreateInvoiceFormProps {
57
config: IConfig;
6-
signer: string;
8+
wagmiConfig: WagmiConfig;
79
requestNetwork: RequestNetwork | null | undefined;
810
currencies: {
911
symbol: string;
@@ -26,7 +28,7 @@ export interface CreateInvoiceFormProps {
2628
* @example
2729
* <CreateInvoiceForm
2830
* config={config}
29-
* signer={signer}
31+
* wagmiConfig={wagmiConfig}
3032
* requestNetwork={requestNetwork}
3133
* currencies={[
3234
* {

‎packages/create-invoice-form/src/lib/utils/prepareRequest.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ interface IRequestParams {
1010
totalTaxAmount: number;
1111
totalAmount: number;
1212
};
13-
signer: string;
13+
address: `0x${string}` | undefined;
1414
}
1515

1616
export const prepareRequestParams = ({
17-
signer,
17+
address,
1818
currency,
1919
formData,
2020
invoiceTotals,
@@ -123,7 +123,7 @@ export const prepareRequestParams = ({
123123
},
124124
signer: {
125125
type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
126-
value: signer,
126+
value: address as string,
127127
},
128128
};
129129
};

‎packages/invoice-dashboard/README.md‎

Lines changed: 42 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -20,59 +20,33 @@ npm install @requestnetwork/invoice-dashboard
2020

2121
### Usage in React
2222

23-
> **⚠️ WARNING:** For NextJS 14.x , ensure you have the following configuration :
24-
>
25-
> #### [next.config.js](https://github.com/RequestNetwork/invoicing-template/blob/main/next.config.mjs)
26-
>
27-
> ```javascript
28-
> /** @type {import('next').NextConfig} */
29-
> const nextConfig = {
30-
> reactStrictMode: true,
31-
> swcMinify: false,
32-
> };
33-
> ```
34-
35-
> **⚠️ WARNING:** To use the Invoice Dashboard in a React application, you must _dynamically_ import `@requestnetwork/invoice-dashboard` and use the component in your JSX file.
36-
>
37-
> ```tsx
38-
> import("@requestnetwork/invoice-dashboard");
39-
> ```
40-
41-
> **⚠️ WARNING:** The Invoice Dashboard component is currently only compatible with [Web3 Onboard](https://onboard.blocknative.com/) because it takes a `WalletState` as a prop. Future iterations will allow for other wallet connectors.
42-
4323
#### [invoice-dashboard.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/index.tsx)
4424

45-
Configure the invoice-dashboard web component by creating a reference to it, setting its properties, and passing the reference as a prop. It's not possible to pass objects into a web component as props directly. See [StackOverflow](https://stackoverflow.com/a/55480022) for details.
25+
You can directly pass props into the invoice-dashboard web component without needing to create references or use workarounds.
4626

4727
```tsx
48-
import("@requestnetwork/invoice-dashboard");
49-
import { useEffect, useRef } from "react";
28+
import Head from "next/head";
5029
import { config } from "@/utils/config";
5130
import { useAppContext } from "@/utils/context";
52-
import { InvoiceDashboardProps } from "@/types";
53-
import { useConnectWallet } from "@web3-onboard/react";
31+
import { currencies } from "@/utils/currencies";
32+
import { rainbowKitConfig as wagmiConfig } from "@/utils/connectWallet";
33+
import InvoiceDashboard from "@requestnetwork/invoice-dashboard/react";
5434

55-
export default function InvoiceDashboard() {
56-
const [{ wallet }] = useConnectWallet();
35+
export default function InvoiceDashboardPage() {
5736
const { requestNetwork } = useAppContext();
58-
const dashboardRef = useRef<InvoiceDashboardProps>(null);
59-
60-
useEffect(() => {
61-
if (dashboardRef.current) {
62-
dashboardRef.current.config = config;
63-
64-
if (wallet && requestNetwork) {
65-
dashboardRef.current.wallet = wallet;
66-
dashboardRef.current.requestNetwork = requestNetwork;
67-
dashboardRef.current.currencies = currencies;
68-
}
69-
}
70-
}, [wallet, requestNetwork]);
7137

7238
return (
7339
<>
40+
<Head>
41+
<title>Request Invoicing</title>
42+
</Head>
7443
<div className="container m-auto w-[100%]">
75-
<invoice-dashboard ref={dashboardRef} />
44+
<InvoiceDashboard
45+
config={config}
46+
currencies={currencies}
47+
requestNetwork={requestNetwork}
48+
wagmiConfig={wagmiConfig}
49+
/>
7650
</div>
7751
</>
7852
);
@@ -106,6 +80,12 @@ export const initializeRequestNetwork = (setter: any, walletClient: any) => {
10680
};
10781
```
10882

83+
#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/wagmiConfig.ts)
84+
85+
The wagmiConfig file configures wallet connections for the InvoiceDashboard component, using RainbowKit and supporting various wallets and blockchains.
86+
87+
For more details see [Wagmi Docs](https://wagmi.sh/react/api/WagmiProvider#config)
88+
10989
#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)
11090

11191
Use the config object to pass additional configuration options to the invoice dashboard component.
@@ -133,27 +113,27 @@ export const config: IConfig = {
133113

134114
## Features
135115

136-
| Feature | Status |
137-
| ------------------------------------------------ | ------ |
138-
| ERC20 Payment | ✅ |
139-
| rnf_invoice format 0.3.0 | ✅ |
140-
| Configure Logo and Colors | ✅ |
141-
| Minimal Chains and Currencies | ✅ |
142-
| Support Wallet Connectors other than Web3Onboard | ❌ |
143-
| Accept Request | ❌ |
144-
| Cancel Request | ❌ |
145-
| Add Stakeholder | ❌ |
146-
| Native Payment | ❌ |
147-
| Conversion Payment | ❌ |
148-
| Batch Payment | ❌ |
149-
| Declarative Payment | ❌ |
150-
| Swap-to-Pay Payment | ❌ |
151-
| Swap-to-Conversion Payment | ❌ |
152-
| Escrow Payment | ❌ |
153-
| Improved UI and UX | ❌ |
154-
| More Chains and Currencies | ❌ |
155-
| More Configuration Options | ❌ |
156-
| Attachments | ❌ |
116+
| Feature | Status |
117+
| ------------------------------------ | ------ |
118+
| ERC20 Payment | ✅ |
119+
| rnf_invoice format 0.3.0 | ✅ |
120+
| Configure Logo and Colors | ✅ |
121+
| Minimal Chains and Currencies | ✅ |
122+
| Compatible with all Wagmi connectors | ✅ |
123+
| Accept Request | ❌ |
124+
| Cancel Request | ❌ |
125+
| Add Stakeholder | ❌ |
126+
| Native Payment | ❌ |
127+
| Conversion Payment | ❌ |
128+
| Batch Payment | ❌ |
129+
| Declarative Payment | ❌ |
130+
| Swap-to-Pay Payment | ❌ |
131+
| Swap-to-Conversion Payment | ❌ |
132+
| Escrow Payment | ❌ |
133+
| Improved UI and UX | ❌ |
134+
| More Chains and Currencies | ❌ |
135+
| More Configuration Options | ❌ |
136+
| Attachments | ❌ |
157137

158138
## Chains and Currencies
159139

0 commit comments

Comments
 (0)