chore: update docs with swc warning (#27)

RequestNetwork · May 28, 2024 · 5f8be46 · 5f8be46
1 parent ca2226b
commit 5f8be46
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 63 deletions.
diff --git a/packages/create-invoice-form/README.md b/packages/create-invoice-form/README.md
@@ -20,15 +20,27 @@ npm install @requestnetwork/create-invoice-form
 
 ### Usage in React
 
-> **⚠️ 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.
+> **⚠️ WARNING:** For NextJS 14.x , ensure you have the following configuration :
+>
+> #### [next.config.js](https://github.com/RequestNetwork/invoicing-template/blob/main/next.config.mjs)
+>
+> ```javascript
+> /** @type {import('next').NextConfig} */
+> const nextConfig = {
+>   reactStrictMode: true,
+>   swcMinify: false,
+> };
+> ```
+
+> **⚠️ 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.
 >
 > ```tsx
 > import("@requestnetwork/create-invoice-form");
 > ```
 
 > **ℹ️ 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.
 
-#### [create-invoice.tsx](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/pages/create-invoice.tsx)
+#### [create-invoice.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/create-invoice.tsx)
 
 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 .
 
@@ -62,7 +74,7 @@ export default function CreateInvoiceForm() {
 }
 ```
 
-#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/utils/initializeRN.ts)
+#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)
 
 Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.
 
@@ -89,7 +101,8 @@ export const initializeRequestNetwork = (setter: any, walletClient: any) => {
 };
 ```
 
-#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/utils/config.ts)
+#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)
+
 Use the config object to pass additional configuration options to the create invoice form component.
 
 Please replace the `builderId` with your own, arbitrarily chosen ID. This is used to track how many invoices are created by your application.
@@ -110,38 +123,38 @@ export const config: IConfig = {
 
 #### Supporting files
 
-- [context.tsx](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/utils/context.tsx) - Use a context provider to reinitialize the Request Network instance when the wallet changes.
-- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/types.d.ts) - Specify types to avoid TypeScript errors.
+- [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.
+- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/types.d.ts) - Specify types to avoid TypeScript errors.
 
 ## Features
 
-| Feature | Status |
-|---------|--------|
-| ERC20 Request | ✅ |
-| rnf_invoice format 0.3.0 | ✅ |
-| Configure Logo and Colors | ✅ |
-| Minimal Chains and Currencies | ✅ |
-| Support Wallet Connectors other than Web3Onboard | ❌ |
-| Native Request | ❌ |
-| Conversion Request | ❌ |
-| Swap-to-Pay Request | ❌ |
-| Swap-to-Conversion Request | ❌ |
-| Escrow Request | ❌ |
-| Improved UI and UX | ❌ |
-| Auto-increment Invoice Number | ❌ |
-| Client Address List | ❌ |
-| Payment Recipient Address List | ❌ |
-| More Chains and Currencies | ❌ |
-| More Configuration Options | ❌ |
-| Attachments | ❌ |
+| Feature                                          | Status |
+| ------------------------------------------------ | ------ |
+| ERC20 Request                                    | ✅     |
+| rnf_invoice format 0.3.0                         | ✅     |
+| Configure Logo and Colors                        | ✅     |
+| Minimal Chains and Currencies                    | ✅     |
+| Support Wallet Connectors other than Web3Onboard | ❌     |
+| Native Request                                   | ❌     |
+| Conversion Request                               | ❌     |
+| Swap-to-Pay Request                              | ❌     |
+| Swap-to-Conversion Request                       | ❌     |
+| Escrow Request                                   | ❌     |
+| Improved UI and UX                               | ❌     |
+| Auto-increment Invoice Number                    | ❌     |
+| Client Address List                              | ❌     |
+| Payment Recipient Address List                   | ❌     |
+| More Chains and Currencies                       | ❌     |
+| More Configuration Options                       | ❌     |
+| Attachments                                      | ❌     |
 
 ## Chains and Currencies
 
-| Chain | Currencies |
-|-------|------------|
-| Ethereum | USDC, USDT, DAI |
-| Polygon | USDC, USDT, DAI, USDCe |
-| Sepolia | USDC, FAU |
+| Chain    | Currencies             |
+| -------- | ---------------------- |
+| Ethereum | USDC, USDT, DAI        |
+| Polygon  | USDC, USDT, DAI, USDCe |
+| Sepolia  | USDC, FAU              |
 
 ## Additional Information
 

diff --git a/packages/invoice-dashboard/README.md b/packages/invoice-dashboard/README.md
@@ -20,16 +20,27 @@ npm install @requestnetwork/invoice-dashboard
 
 ### Usage in React
 
-> **⚠️ 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.
+> **⚠️ WARNING:** For NextJS 14.x , ensure you have the following configuration :
+>
+> #### [next.config.js](https://github.com/RequestNetwork/invoicing-template/blob/main/next.config.mjs)
+>
+> ```javascript
+> /** @type {import('next').NextConfig} */
+> const nextConfig = {
+>   reactStrictMode: true,
+>   swcMinify: false,
+> };
+> ```
+
+> **⚠️ 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.
 >
 > ```tsx
 > import("@requestnetwork/invoice-dashboard");
 > ```
 
-
 > **⚠️ 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.
 
-#### [invoice-dashboard.tsx](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/pages/index.tsx)
+#### [invoice-dashboard.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/index.tsx)
 
 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.
 
@@ -67,7 +78,7 @@ export default function InvoiceDashboard() {
 }
 ```
 
-#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/utils/initializeRN.ts)
+#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)
 
 Initialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.
 
@@ -94,7 +105,8 @@ export const initializeRequestNetwork = (setter: any, walletClient: any) => {
 };
 ```
 
-#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/utils/config.ts)
+#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)
+
 Use the config object to pass additional configuration options to the invoice dashboard component.
 
 Please replace the `builderId` with your own, arbitrarily chosen ID. This is used to track how many invoices are created by your application.
@@ -115,40 +127,40 @@ export const config: IConfig = {
 
 #### Supporting files
 
-- [context.tsx](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/utils/context.tsx) - Use a context provider to reinitialize the Request Network instance when the wallet changes.
-- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/2a1d0526c21f3e403bb6d6507709d0d3e0fa463f/types.d.ts) - Specify types to avoid TypeScript errors.
+- [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.
+- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/types.d.ts) - Specify types to avoid TypeScript errors.
 
 ## Features
 
-| Feature | Status |
-|---------|--------|
-| ERC20 Payment | ✅ |
-| rnf_invoice format 0.3.0 | ✅ |
-| Configure Logo and Colors | ✅ |
-| Minimal Chains and Currencies | ✅ |
-| Support Wallet Connectors other than Web3Onboard | ❌ |
-| Accept Request | ❌ |
-| Cancel Request | ❌ |
-| Add Stakeholder | ❌ |
-| Native Payment | ❌ |
-| Conversion Payment | ❌ |
-| Batch Payment | ❌ |
-| Declarative Payment | ❌ |
-| Swap-to-Pay Payment | ❌ |
-| Swap-to-Conversion Payment | ❌ |
-| Escrow Payment | ❌ |
-| Improved UI and UX | ❌ |
-| More Chains and Currencies | ❌ |
-| More Configuration Options | ❌ |
-| Attachments | ❌ |
+| Feature                                          | Status |
+| ------------------------------------------------ | ------ |
+| ERC20 Payment                                    | ✅     |
+| rnf_invoice format 0.3.0                         | ✅     |
+| Configure Logo and Colors                        | ✅     |
+| Minimal Chains and Currencies                    | ✅     |
+| Support Wallet Connectors other than Web3Onboard | ❌     |
+| Accept Request                                   | ❌     |
+| Cancel Request                                   | ❌     |
+| Add Stakeholder                                  | ❌     |
+| Native Payment                                   | ❌     |
+| Conversion Payment                               | ❌     |
+| Batch Payment                                    | ❌     |
+| Declarative Payment                              | ❌     |
+| Swap-to-Pay Payment                              | ❌     |
+| Swap-to-Conversion Payment                       | ❌     |
+| Escrow Payment                                   | ❌     |
+| Improved UI and UX                               | ❌     |
+| More Chains and Currencies                       | ❌     |
+| More Configuration Options                       | ❌     |
+| Attachments                                      | ❌     |
 
 ## Chains and Currencies
 
-| Chain | Currencies |
-|-------|------------|
-| Ethereum | USDC, USDT, DAI |
-| Polygon | USDC, USDT, DAI, USDCe |
-| Sepolia | USDC, FAU |
+| Chain    | Currencies             |
+| -------- | ---------------------- |
+| Ethereum | USDC, USDT, DAI        |
+| Polygon  | USDC, USDT, DAI, USDCe |
+| Sepolia  | USDC, FAU              |
 
 ## Additional Information