Skip to content

Commit 4cb5573

Browse files
sstefdevsstefdev
committed
chore: add readme
1 parent 4872241 commit 4cb5573

File tree

1 file changed

+145
-0
lines changed

1 file changed

+145
-0
lines changed

‎packages/single-invoice/README.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# Request Network Single Invoice Web Component
2+
3+
[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice.svg)](https://badge.fury.io/js/%40requestnetwork%2Fsingle-invoice)
4+
5+
A web component for integrating a single Request Network invoice view into a web application.
6+
7+
## Introduction
8+
9+
The Single Invoice component allows users to view and pay a specific request using the Request Network. It is built using Svelte but compiled to a Web Component, making it usable in any web environment, regardless of the framework.
10+
11+
## Installation
12+
13+
To install the component, use npm:
14+
15+
```bash
16+
npm install @requestnetwork/single-invoice
17+
```
18+
19+
## Usage
20+
21+
### Usage in React
22+
23+
#### [single-invoice.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/invoice/[id].tsx)
24+
25+
You can directly pass props into the single-invoice web component without needing to create references or use workarounds.
26+
27+
```tsx
28+
import Head from "next/head";
29+
import { config } from "@/utils/config";
30+
import { useAppContext } from "@/utils/context";
31+
import { useRouter } from "next/router";
32+
import { rainbowKitConfig as wagmiConfig } from "@/utils/connectWallet";
33+
import SingleInvoice from "@requestnetwork/single-invoice/react";
34+
35+
export default function SingleInvoicePage() {
36+
const router = useRouter();
37+
const { requestNetwork } = useAppContext();
38+
const { id } = router.query;
39+
40+
return (
41+
<>
42+
<Head>
43+
<title>Request Invoice</title>
44+
</Head>
45+
<div className="container m-auto w-[100%]">
46+
<SingleInvoice
47+
config={config}
48+
requestNetwork={requestNetwork}
49+
wagmiConfig={wagmiConfig}
50+
requestId={id as string}
51+
/>
52+
</div>
53+
</>
54+
);
55+
}
56+
```
57+
58+
#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)
59+
60+
Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.
61+
62+
```ts
63+
import { RequestNetwork } from "@requestnetwork/request-client.js";
64+
import { Web3SignatureProvider } from "@requestnetwork/web3-signature";
65+
66+
export const initializeRequestNetwork = (setter: any, walletClient: any) => {
67+
try {
68+
const web3SignatureProvider = new Web3SignatureProvider(walletClient);
69+
70+
const requestNetwork = new RequestNetwork({
71+
nodeConnectionConfig: {
72+
baseURL: "https://gnosis.gateway.request.network/",
73+
},
74+
signatureProvider: web3SignatureProvider,
75+
});
76+
77+
setter(requestNetwork);
78+
} catch (error) {
79+
console.error("Failed to initialize the Request Network:", error);
80+
setter(null);
81+
}
82+
};
83+
```
84+
85+
#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/wagmiConfig.ts)
86+
87+
The wagmiConfig file configures wallet connections for the SingleInvoice component, using RainbowKit and supporting various wallets and blockchains.
88+
89+
For more details see [Wagmi Docs](https://wagmi.sh/react/api/WagmiProvider#config)
90+
91+
#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)
92+
93+
Use the config object to pass additional configuration options to the single invoice component.
94+
95+
```ts
96+
import { IConfig } from "@requestnetwork/shared";
97+
98+
export const config: IConfig = {
99+
builderId: "request-network", // Replace with your builder ID, arbitrarily chosen, used for metrics
100+
dashboardLink: "/",
101+
logo: "/assets/logo-sm.svg",
102+
colors: {
103+
main: "#0BB489",
104+
secondary: "#58E1A5",
105+
},
106+
};
107+
```
108+
109+
#### Supporting files
110+
111+
- [context.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/context.tsx) - Use a context provider to reinitialize the Request Network instance when the wallet changes.
112+
- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/types.d.ts) - Specify types to avoid TypeScript errors.
113+
114+
## Features
115+
116+
| Feature | Status |
117+
| ------------------------------------ | ------ |
118+
| ERC20 Payment | ✅ |
119+
| Native Payment | ✅ |
120+
| Conversion Payment | ✅ |
121+
| rnf_invoice format 0.3.0 | ✅ |
122+
| Configure Logo and Colors | ✅ |
123+
| Compatible with all Wagmi connectors | ✅ |
124+
| Encrypted Invoice Support | ✅ |
125+
| PDF Export | ✅ |
126+
| Detailed Payment Information | ✅ |
127+
| Payment Status Tracking | ✅ |
128+
| Network Auto-switching | ✅ |
129+
| Swap-to-Pay Payment | ❌ |
130+
| Swap-to-Conversion Payment | ❌ |
131+
| Escrow Payment | ❌ |
132+
| Declarative Payment | ❌ |
133+
| Attachments | ❌ |
134+
135+
## Chains and Currencies
136+
137+
| Chain | Currencies |
138+
| -------- | ---------------------- |
139+
| Ethereum | USDC, USDT, DAI |
140+
| Polygon | USDC, USDT, DAI, USDCe |
141+
| Sepolia | USDC, FAU |
142+
143+
## Additional Information
144+
145+
For more information, see the [Request Network documentation](https://docs.request.network/).

0 commit comments

Comments
 (0)