Skip to content

feat: integrated wagmi and wagmiConfig, improved data flow and state management #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 18, 2024
Merged

feat: integrated wagmi and wagmiConfig, improved data flow and state management #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
772141c
feat: changed the arch to reflect props changes
sstefdev Oct 17, 2024
6e378d2
fix: added watcher for wallets, added types
sstefdev Oct 17, 2024
d9cb263
fix: added tick for better control over reactivity of wallets and loa…
sstefdev Oct 18, 2024
3040c84
chore: updated the versions of invoicing and create invoice
sstefdev Oct 18, 2024
ba4f99b
chore: move wagmi/core to deps
sstefdev Oct 18, 2024
ae44bcd
fix: codderrabit comments fixed - added unwatch for wallet and try ca…
sstefdev Oct 18, 2024
e066cad
fix: checking the unwatch function, updated readme's and updated vers…
sstefdev Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26,660 changes: 17,788 additions & 8,872 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

106 changes: 45 additions & 61 deletions packages/create-invoice-form/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,57 +20,35 @@ npm install @requestnetwork/create-invoice-form

### Usage in React

> **⚠️ 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/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 .
You can directly pass props into the create-invoice-form web component without needing to create references or use workarounds.

```tsx
import("@requestnetwork/create-invoice-form");
import { useEffect, useRef } from "react";
import Head from "next/head";
import { config } from "@/utils/config";
import { useAppContext } from "@/utils/context";
import { CreateInvoiceFormProps } from "@/types";

export default function CreateInvoiceForm() {
const formRef = useRef<CreateInvoiceFormProps>(null);
const { wallet, requestNetwork } = useAppContext();

useEffect(() => {
if (formRef.current) {
formRef.current.config = config;
import { currencies } from "@/utils/currencies";
import { rainbowKitConfig as wagmiConfig } from "@/utils/wagmiConfig";
import CreateInvoiceForm from "@requestnetwork/create-invoice-form/react";

if (wallet && requestNetwork) {
formRef.current.signer = wallet.accounts[0].address;
formRef.current.requestNetwork = requestNetwork;
formRef.current.currencies = currencies;
}
}
}, [wallet, requestNetwork]);
export default function CreateInvoice() {
const { requestNetwork } = useAppContext();

return (
<div className="container m-auto w-[100%]">
<create-invoice-form ref={formRef} />
</div>
<>
<Head>
<title>Request Invoicing - Create an Invoice</title>
</Head>
<div className="container m-auto w-[100%]">
<CreateInvoiceForm
config={config}
currencies={currencies}
wagmiConfig={wagmiConfig}
requestNetwork={requestNetwork}
/>
</div>
</>
Comment on lines +35 to +51
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Updated example code looks great!

The new example for the CreateInvoice component is much clearer and demonstrates the simplified usage of the CreateInvoiceForm. The direct prop passing, including the new wagmiConfig, is well-implemented.

For consistency with the import statement, consider updating the component name in the JSX:

-        <CreateInvoiceForm
+        <CreateInvoiceForm.default

This change would align with the import statement: import CreateInvoiceForm from "@requestnetwork/create-invoice-form/react";

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default function CreateInvoice() {
const { requestNetwork } = useAppContext();
return (
<div className="container m-auto w-[100%]">
<create-invoice-form ref={formRef} />
</div>
<>
<Head>
<title>Request Invoicing - Create an Invoice</title>
</Head>
<div className="container m-auto w-[100%]">
<CreateInvoiceForm
config={config}
currencies={currencies}
wagmiConfig={wagmiConfig}
requestNetwork={requestNetwork}
/>
</div>
</>
export default function CreateInvoice() {
const { requestNetwork } = useAppContext();
return (
<>
<Head>
<title>Request Invoicing - Create an Invoice</title>
</Head>
<div className="container m-auto w-[100%]">
<CreateInvoiceForm.default
config={config}
currencies={currencies}
wagmiConfig={wagmiConfig}
requestNetwork={requestNetwork}
/>
</div>
</>

);
}
```
Expand Down Expand Up @@ -102,6 +80,12 @@ export const initializeRequestNetwork = (setter: any, walletClient: any) => {
};
```

#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/wagmiConfig.ts)

The wagmiConfig file configures wallet connections for the InvoiceDashboard component, using RainbowKit and supporting various wallets and blockchains.

For more details see [Wagmi Docs](https://wagmi.sh/react/api/WagmiProvider#config)
Comment on lines +83 to +87
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Great addition of wagmiConfig information!

The new section describing the wagmiConfig.ts file is a valuable addition to the README. It provides essential information about wallet connections and RainbowKit integration.

To make this section even more helpful, consider adding a brief code snippet showing the basic structure of the wagmiConfig.ts file. This would give users a quick reference for implementation.


#### [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.
Expand Down Expand Up @@ -129,25 +113,25 @@ export const config: IConfig = {

## 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 | ✅ |
| Compatible with all Wagmi connectors | ✅ |
| 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 | ❌ |
Comment on lines +116 to +134
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Updated Features table is more comprehensive!

The addition of "Compatible with all Wagmi connectors" to the Features table is a great update, reflecting the enhanced wallet connection capabilities of the component.

To improve clarity, consider adding a brief explanation or footnote about what Wagmi connectors are and why this compatibility is beneficial. This would help users who might not be familiar with Wagmi to understand the significance of this feature.


## Chains and Currencies

Expand Down
5 changes: 3 additions & 2 deletions packages/create-invoice-form/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@requestnetwork/create-invoice-form",
"version": "0.8.1",
"version": "0.9.0",
"main": "./dist/web-component.umd.cjs",
"scripts": {
"dev": "vite dev",
Expand Down Expand Up @@ -33,7 +33,8 @@
],
"dependencies": {
"@requestnetwork/request-client.js": "0.47.1-next.2043",
"viem": "^2.9.15"
"viem": "^2.9.15",
"@wagmi/core": "^2.13.8"
Comment on lines +36 to +37
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Dependencies look good, but consider specifying exact versions.

The addition of @wagmi/core as a dependency is appropriate for the integration of wagmi, as mentioned in the PR objectives. The existing viem dependency is also relevant for Ethereum interactions.

However, consider using exact versions instead of caret ranges for both viem and @wagmi/core. This can help ensure consistency across different environments and prevent potential issues from minor updates.

You might want to update the dependencies like this:

-    "viem": "^2.9.15",
-    "@wagmi/core": "^2.13.8"
+    "viem": "2.9.15",
+    "@wagmi/core": "2.13.8"

This change will lock the versions to the specific ones you've tested with, improving reproducibility.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"viem": "^2.9.15",
"@wagmi/core": "^2.13.8"
"viem": "2.9.15",
"@wagmi/core": "2.13.8"

},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.5.2",
Expand Down
29 changes: 18 additions & 11 deletions packages/create-invoice-form/src/lib/create-invoice-form.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
<svelte:options customElement="create-invoice-form" />

<script lang="ts">
import { getAccount } from "@wagmi/core";
import { Config as WagmiConfig } from "wagmi";
// Types
import { APP_STATUS } from "@requestnetwork/shared-types/enums";
import { type GetAccountReturnType } from "@wagmi/core";
import type { IConfig } from "@requestnetwork/shared-types";

import { APP_STATUS } from "@requestnetwork/shared-types/enums";
import type { RequestNetwork } from "@requestnetwork/request-client.js";
// Utils
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
import { getInitialFormData, prepareRequestParams } from "./utils";
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";

// Components
import { InvoiceForm, InvoiceView } from "./invoice";
import Button from "@requestnetwork/shared-components/button.svelte";
import Status from "@requestnetwork/shared-components/status.svelte";
import Modal from "@requestnetwork/shared-components/modal.svelte";

import { InvoiceForm, InvoiceView } from "./invoice";
import { getInitialFormData, prepareRequestParams } from "./utils";
import type { RequestNetwork } from "@requestnetwork/request-client.js";

export let config: IConfig;
export let signer: string = "";
export let wagmiConfig: WagmiConfig;
export let requestNetwork: RequestNetwork | null | undefined;
export let currencies: any;

let account: GetAccountReturnType;
let isTimeout = false;
let activeConfig = config ? config : defaultConfig;
let mainColor = activeConfig.colors.main;
Expand Down Expand Up @@ -77,7 +78,13 @@
};

$: {
formData.creatorId = signer;
if (wagmiConfig) {
account = getAccount(wagmiConfig);
}
}

$: {
formData.creatorId = (account?.address ?? "") as string;
invoiceTotals = calculateInvoiceTotals(formData.items);
}

Expand Down Expand Up @@ -130,7 +137,7 @@
formData.miscellaneous.createdWith = window.location.hostname;

const requestCreateParameters = prepareRequestParams({
signer,
address: account?.address,
formData,
currency,
invoiceTotals,
Expand Down
6 changes: 4 additions & 2 deletions ...e-form/src/lib/react/CreateInvoiceForm.ts → ...form/src/lib/react/CreateInvoiceForm.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from "react";
import { Config as WagmiConfig } from "@wagmi/core";
import type { IConfig } from "@requestnetwork/shared-types";
import type { RequestNetwork, Types } from "@requestnetwork/request-client.js";

export interface CreateInvoiceFormProps {
config: IConfig;
signer: string;
wagmiConfig: WagmiConfig;
requestNetwork: RequestNetwork | null | undefined;
currencies: {
symbol: string;
Expand All @@ -26,7 +28,7 @@ export interface CreateInvoiceFormProps {
* @example
* <CreateInvoiceForm
* config={config}
* signer={signer}
* wagmiConfig={wagmiConfig}
* requestNetwork={requestNetwork}
* currencies={[
* {
Expand Down
6 changes: 3 additions & 3 deletions packages/create-invoice-form/src/lib/utils/prepareRequest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ interface IRequestParams {
totalTaxAmount: number;
totalAmount: number;
};
signer: string;
address: `0x${string}` | undefined;
}

export const prepareRequestParams = ({
signer,
address,
currency,
formData,
invoiceTotals,
Expand Down Expand Up @@ -123,7 +123,7 @@ export const prepareRequestParams = ({
},
signer: {
type: Types.Identity.TYPE.ETHEREUM_ADDRESS,
value: signer,
value: address as string,
},
};
};
104 changes: 42 additions & 62 deletions packages/invoice-dashboard/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,59 +20,33 @@ npm install @requestnetwork/invoice-dashboard

### Usage in React

> **⚠️ 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/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.
You can directly pass props into the invoice-dashboard web component without needing to create references or use workarounds.

```tsx
import("@requestnetwork/invoice-dashboard");
import { useEffect, useRef } from "react";
import Head from "next/head";
import { config } from "@/utils/config";
import { useAppContext } from "@/utils/context";
import { InvoiceDashboardProps } from "@/types";
import { useConnectWallet } from "@web3-onboard/react";
import { currencies } from "@/utils/currencies";
import { rainbowKitConfig as wagmiConfig } from "@/utils/connectWallet";
import InvoiceDashboard from "@requestnetwork/invoice-dashboard/react";
Comment on lines +28 to +33
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

LGTM: Simplified usage instructions and improved imports.

The updated usage instructions for React provide a clearer and more straightforward integration process. The changes include:

  1. Direct prop passing to the component without needing references.
  2. Updated import statement for InvoiceDashboard.
  3. Renaming the function to InvoiceDashboardPage for better clarity.
  4. Addition of wagmiConfig prop.

These updates significantly improve the ease of use and understanding for developers integrating the component.

Consider adding a brief comment explaining the purpose of the wagmiConfig prop for developers who might not be familiar with it.

Also applies to: 35-35, 40-42, 44-49


export default function InvoiceDashboard() {
const [{ wallet }] = useConnectWallet();
export default function InvoiceDashboardPage() {
const { requestNetwork } = useAppContext();
const dashboardRef = useRef<InvoiceDashboardProps>(null);

useEffect(() => {
if (dashboardRef.current) {
dashboardRef.current.config = config;

if (wallet && requestNetwork) {
dashboardRef.current.wallet = wallet;
dashboardRef.current.requestNetwork = requestNetwork;
dashboardRef.current.currencies = currencies;
}
}
}, [wallet, requestNetwork]);

return (
<>
<Head>
<title>Request Invoicing</title>
</Head>
<div className="container m-auto w-[100%]">
<invoice-dashboard ref={dashboardRef} />
<InvoiceDashboard
config={config}
currencies={currencies}
requestNetwork={requestNetwork}
wagmiConfig={wagmiConfig}
/>
</div>
</>
);
Expand Down Expand Up @@ -106,6 +80,12 @@ export const initializeRequestNetwork = (setter: any, walletClient: any) => {
};
```

#### [wagmiConfig.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/wagmiConfig.ts)

The wagmiConfig file configures wallet connections for the InvoiceDashboard component, using RainbowKit and supporting various wallets and blockchains.

For more details see [Wagmi Docs](https://wagmi.sh/react/api/WagmiProvider#config)

Comment on lines +83 to +88
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

LGTM: Added helpful initialization instructions.

The new section for initializeRN.ts is a valuable addition to the README. It provides clear instructions on how to initialize the RequestNetwork object using either an Ethers Signer or Viem WalletClient. This information is crucial for developers integrating the component.

Consider adding a brief explanation of when and where this initialization should occur in the application lifecycle, to provide more context for developers.

🧹 Nitpick (assertive)

LGTM: Added wagmiConfig.ts section.

The new section for wagmiConfig.ts is a valuable addition to the README. It briefly explains the purpose of the file in configuring wallet connections for the InvoiceDashboard component and provides a link to the Wagmi documentation for more details.

Consider adding a basic code snippet or example of a wagmiConfig object to give developers a quick reference without needing to immediately consult the Wagmi documentation.

#### [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.
Expand Down Expand Up @@ -133,27 +113,27 @@ export const config: IConfig = {

## 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 | ✅ |
| Compatible with all Wagmi connectors | ✅ |
| 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

Expand Down
Loading