{"_id":"@ariesgun/invoice-dashboard","_rev":"3-b1b9265d6d89e0a4232033ce0bbcacca","name":"@ariesgun/invoice-dashboard","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard)","dist-tags":{"latest":"0.4.5"},"versions":{"0.4.1":{"name":"@ariesgun/invoice-dashboard","version":"0.4.1","license":"MIT","_id":"@ariesgun/invoice-dashboard@0.4.1","dist":{"shasum":"a4787684ce5551c34c71b8ddc61de7a474ff9a47","tarball":"https://registry.npmjs.org/@ariesgun/invoice-dashboard/-/invoice-dashboard-0.4.1.tgz","fileCount":17,"integrity":"sha512-DhwAhH4fnxbAN7TXNyBTQUprvhnLXPQlBI6+subHKZ6qNfaddHc+yc+Ca9Yyvq5cP3YO9Z7t5wcR9hBj3RxJJQ==","signatures":[{"sig":"MEUCIE98sAmPMPwMe8U8MshiYd+AkKyYC4tSNeV0x5UZkYL6AiEAvpArn5VLpOtkYqUJ35q+zJbL5V5aVl67rq0rzRX/Plk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70432482},"main":"./dist/web-component.umd.cjs","type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/web-component.js","require":"./dist/web-component.umd.cjs"}},"gitHead":"ec8bb8b1d6b5d0088f592b0651cd8448cca29e60","scripts":{"dev":"vite dev","build":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","clean":"rm -rf dist && rm -rf .svelte-kit","package":"svelte-kit sync && svelte-package && npm run build:wc && publint","preview":"vite preview","build:wc":"vite build -c vite.wc.config.ts","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package","is-release-needed":"bash ../../scripts/is-release-needed.sh"},"_npmUser":{"name":"ariesgun","email":"aries.thio@hotmail.com"},"_npmVersion":"10.7.0","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard)","directories":{},"_nodeVersion":"20.14.0","dependencies":{"viem":"^2.9.15","svelte":"^4.0.5","publint":"^0.2.8","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","stream-browserify":"^3.0.0","@web3-onboard/core":"^2.21.6","@requestnetwork/shared":"^0.4.1","@requestnetwork/web3-signature":"0.5.0","@requestnetwork/payment-detection":"0.42.0","@requestnetwork/payment-processor":"0.44.0","@requestnetwork/request-client.js":"0.45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.2","tslib":"^2.4.1","assert":"^2.1.0","ethers":"^5.7.2","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^1.27.4","@sveltejs/package":"^2.0.0","@sveltejs/adapter-auto":"^2.0.0","vite-plugin-node-polyfills":"^0.21.0","rollup-plugin-polyfill-node":"^0.13.0","@sveltejs/vite-plugin-svelte":"^2.5.2"},"_npmOperationalInternal":{"tmp":"tmp/invoice-dashboard_0.4.1_1719429782152_0.5232922848635335","host":"s3://npm-registry-packages"}},"0.4.2":{"name":"@ariesgun/invoice-dashboard","version":"0.4.2","license":"MIT","_id":"@ariesgun/invoice-dashboard@0.4.2","dist":{"shasum":"c5fc85a1d743b06045b749164d8f61b192b6a45c","tarball":"https://registry.npmjs.org/@ariesgun/invoice-dashboard/-/invoice-dashboard-0.4.2.tgz","fileCount":17,"integrity":"sha512-GpdW5kQceC6kQOnu7/0n6B8yQD5sxzWTYIH+5Xx2Cuk5s3SYG7uWo59WHuQtJZWjtjKBtJSFvmWhqm7Niez4XA==","signatures":[{"sig":"MEUCIQDXXF3ZRMxaJItVIaa9S58bXwZx2q7XifWjFk6GClUPVQIgKRNofSq1Cw8qRoHj6vrpwxNk6v5/riSuBmurHoCSUc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70432476},"main":"./dist/web-component.umd.cjs","type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/web-component.js","require":"./dist/web-component.umd.cjs"}},"gitHead":"ec8bb8b1d6b5d0088f592b0651cd8448cca29e60","scripts":{"dev":"vite dev","build":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","clean":"rm -rf dist && rm -rf .svelte-kit","package":"svelte-kit sync && svelte-package && npm run build:wc && publint","preview":"vite preview","build:wc":"vite build -c vite.wc.config.ts","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package","is-release-needed":"bash ../../scripts/is-release-needed.sh"},"_npmUser":{"name":"ariesgun","email":"aries.thio@hotmail.com"},"_npmVersion":"10.7.0","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard)","directories":{},"_nodeVersion":"20.14.0","dependencies":{"viem":"^2.9.15","svelte":"^4.0.5","publint":"^0.2.8","browserify-zlib":"^0.2.0","@ariesgun/shared":"^0.4.1","crypto-browserify":"^3.12.0","stream-browserify":"^3.0.0","@web3-onboard/core":"^2.21.6","@requestnetwork/web3-signature":"0.5.0","@requestnetwork/payment-detection":"0.42.0","@requestnetwork/payment-processor":"0.44.0","@requestnetwork/request-client.js":"0.45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.2","tslib":"^2.4.1","assert":"^2.1.0","ethers":"^5.7.2","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^1.27.4","@sveltejs/package":"^2.0.0","@sveltejs/adapter-auto":"^2.0.0","vite-plugin-node-polyfills":"^0.21.0","rollup-plugin-polyfill-node":"^0.13.0","@sveltejs/vite-plugin-svelte":"^2.5.2"},"_npmOperationalInternal":{"tmp":"tmp/invoice-dashboard_0.4.2_1719431809650_0.578289205329799","host":"s3://npm-registry-packages"}},"0.4.3":{"name":"@ariesgun/invoice-dashboard","version":"0.4.3","license":"MIT","_id":"@ariesgun/invoice-dashboard@0.4.3","dist":{"shasum":"49d6b3c77633e9354d732a6fd94075355d759ae2","tarball":"https://registry.npmjs.org/@ariesgun/invoice-dashboard/-/invoice-dashboard-0.4.3.tgz","fileCount":17,"integrity":"sha512-mJJ23R33GS5QRh0LRdh0LZn8hDY7BACPLxU91y8UQdhG/F8iV/ZBUXjOuS+BAYBXpw4Epiw6VrBNLdipmTLJzA==","signatures":[{"sig":"MEUCIA2q1I1mz9e6uw70JlNAt1yuby0ianrX6XJxH+sxhLhPAiEAhHuAIfFccusoGgT9FnFusyHeZ8lD8CEGE/r5nOsW0lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":70448185},"main":"./dist/web-component.umd.cjs","type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/web-component.js","require":"./dist/web-component.umd.cjs"}},"gitHead":"ec8bb8b1d6b5d0088f592b0651cd8448cca29e60","scripts":{"dev":"vite dev","build":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","clean":"rm -rf dist && rm -rf .svelte-kit","package":"svelte-kit sync && svelte-package && npm run build:wc && publint","preview":"vite preview","build:wc":"vite build -c vite.wc.config.ts","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","prepublishOnly":"npm run package","is-release-needed":"bash ../../scripts/is-release-needed.sh"},"_npmUser":{"name":"ariesgun","email":"aries.thio@hotmail.com"},"_npmVersion":"10.7.0","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard)","directories":{},"_nodeVersion":"20.14.0","dependencies":{"viem":"^2.9.15","svelte":"^4.0.5","publint":"^0.2.8","browserify-zlib":"^0.2.0","@ariesgun/shared":"^0.4.1","crypto-browserify":"^3.12.0","stream-browserify":"^3.0.0","@web3-onboard/core":"^2.21.6","@requestnetwork/web3-signature":"0.5.0","@requestnetwork/payment-detection":"0.42.0","@requestnetwork/payment-processor":"0.44.0","@requestnetwork/request-client.js":"0.45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.2","tslib":"^2.4.1","assert":"^2.1.0","ethers":"^5.7.2","typescript":"^5.0.0","svelte-check":"^3.6.0","@sveltejs/kit":"^1.27.4","@sveltejs/package":"^2.0.0","@sveltejs/adapter-auto":"^2.0.0","vite-plugin-node-polyfills":"^0.21.0","rollup-plugin-polyfill-node":"^0.13.0","@sveltejs/vite-plugin-svelte":"^2.5.2"},"_npmOperationalInternal":{"tmp":"tmp/invoice-dashboard_0.4.3_1719472101417_0.12552159053805179","host":"s3://npm-registry-packages"}},"0.4.5":{"name":"@ariesgun/invoice-dashboard","version":"0.4.5","main":"./dist/web-component.umd.cjs","scripts":{"dev":"vite dev","build":"npm run package","build:wc":"vite build -c vite.wc.config.ts","preview":"vite preview","package":"svelte-kit sync && svelte-package && npm run build:wc && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","clean":"rm -rf dist && rm -rf .svelte-kit","is-release-needed":"bash ../../scripts/is-release-needed.sh"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","require":"./dist/web-component.umd.cjs","default":"./dist/web-component.js"}},"dependencies":{"@ariesgun/shared":"^0.4.1","@requestnetwork/payment-detection":"^0.43.1-next.2045","@requestnetwork/payment-processor":"^0.45.1-next.2045","@requestnetwork/request-client.js":"^0.47.1-next.2045","@requestnetwork/web3-signature":"^0.6.1-next.2045","@web3-onboard/core":"^2.21.6","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","publint":"^0.2.8","stream-browserify":"^3.0.0","svelte":"^4.0.5","viem":"^2.9.15"},"devDependencies":{"@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.27.4","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^2.5.2","assert":"^2.1.0","ethers":"^5.7.2","rollup-plugin-polyfill-node":"^0.13.0","svelte-check":"^3.6.0","tslib":"^2.4.1","typescript":"^5.0.0","vite":"^4.4.2","vite-plugin-node-polyfills":"^0.21.0"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","license":"MIT","publishConfig":{"access":"public"},"_id":"@ariesgun/invoice-dashboard@0.4.5","gitHead":"dfe3a17bdb9db6afea103017f5301d4ef2ab808b","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard)","_nodeVersion":"18.20.3","_npmVersion":"9.8.1","dist":{"integrity":"sha512-/buKvDsNrE9j8RZxx19gfnaCtASyMgGGaqalPqYkXTJld63oGAbwNyQF7TD54KH7HKftdeJDFlGCLq5ylazKGg==","shasum":"1113d6fccb60f2cbbd25fade519a2bbb2aaf0592","tarball":"https://registry.npmjs.org/@ariesgun/invoice-dashboard/-/invoice-dashboard-0.4.5.tgz","fileCount":17,"unpackedSize":48653921,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDD4zFnWflq3vPr2m3e2HXUdJUKnO8XIED+hl4bjth2AiAsdWqwHJ6R4LHaqRz6pY4LR7AXP5g7KDjz5+Qi58BEkQ=="}]},"_npmUser":{"name":"ariesgun","email":"aries.thio@hotmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/invoice-dashboard_0.4.5_1719601557703_0.08985066630146066"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-26T19:23:02.018Z","modified":"2024-06-28T19:05:58.622Z","0.4.1":"2024-06-26T19:23:02.735Z","0.4.2":"2024-06-26T19:56:50.011Z","0.4.3":"2024-06-27T07:08:21.780Z","0.4.5":"2024-06-28T19:05:58.451Z"},"maintainers":[{"name":"ariesgun","email":"aries.thio@hotmail.com"}],"license":"MIT","readme":"# Request Network Invoice Dashboard Web Component\n\n[![npm version](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard.svg)](https://badge.fury.io/js/%40requestnetwork%2Finvoice-dashboard)\n\nA web component for integrating the Request Network's Invoice Dashboard into a web application.\n\n## Introduction\n\nThe Invoice Dashboard component allows users view and pay a 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.\n\n## Installation\n\nTo install the component, use npm:\n\n```bash\nnpm install @requestnetwork/invoice-dashboard\n```\n\n## Usage\n\n### Usage in React\n\n> **⚠️ WARNING:** For NextJS 14.x , ensure you have the following configuration :\n>\n> #### [next.config.js](https://github.com/RequestNetwork/invoicing-template/blob/main/next.config.mjs)\n>\n> ```javascript\n> /** @type {import('next').NextConfig} */\n> const nextConfig = {\n>   reactStrictMode: true,\n>   swcMinify: false,\n> };\n> ```\n\n> **⚠️ 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.\n>\n> ```tsx\n> import(\"@requestnetwork/invoice-dashboard\");\n> ```\n\n> **⚠️ 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.\n\n#### [invoice-dashboard.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/index.tsx)\n\nConfigure 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.\n\n```tsx\nimport(\"@requestnetwork/invoice-dashboard\");\nimport { useEffect, useRef } from \"react\";\nimport { config } from \"@/utils/config\";\nimport { useAppContext } from \"@/utils/context\";\nimport { InvoiceDashboardProps } from \"@/types\";\nimport { useConnectWallet } from \"@web3-onboard/react\";\n\nexport default function InvoiceDashboard() {\n  const [{ wallet }] = useConnectWallet();\n  const { requestNetwork } = useAppContext();\n  const dashboardRef = useRef<InvoiceDashboardProps>(null);\n\n  useEffect(() => {\n    if (dashboardRef.current) {\n      dashboardRef.current.config = config;\n\n      if (wallet && requestNetwork) {\n        dashboardRef.current.wallet = wallet;\n        dashboardRef.current.requestNetwork = requestNetwork;\n      }\n    }\n  }, [wallet, requestNetwork]);\n\n  return (\n    <>\n      <div className=\"container m-auto  w-[100%]\">\n        <invoice-dashboard ref={dashboardRef} />\n      </div>\n    </>\n  );\n}\n```\n\n#### [initializeRN.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/initializeRN.ts)\n\nInitialize the `RequestNetwork` object using an Ethers `Signer` or Viem `WalletClient`.\n\n```ts\nimport { RequestNetwork } from \"@requestnetwork/request-client.js\";\nimport { Web3SignatureProvider } from \"@requestnetwork/web3-signature\";\n\nexport const initializeRequestNetwork = (setter: any, walletClient: any) => {\n  try {\n    const web3SignatureProvider = new Web3SignatureProvider(walletClient);\n\n    const requestNetwork = new RequestNetwork({\n      nodeConnectionConfig: {\n        baseURL: \"https://gnosis.gateway.request.network/\",\n      },\n      signatureProvider: web3SignatureProvider,\n    });\n\n    setter(requestNetwork);\n  } catch (error) {\n    console.error(\"Failed to initialize the Request Network:\", error);\n    setter(null);\n  }\n};\n```\n\n#### [config.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/utils/config.ts)\n\nUse the config object to pass additional configuration options to the invoice dashboard component.\n\nPlease replace the `builderId` with your own, arbitrarily chosen ID. This is used to track how many invoices are created by your application.\n\n```ts\nimport { IConfig } from \"@ariesgun/shared\";\n\nexport const config: IConfig = {\n  builderId: \"request-network\", // Replace with your builder ID, arbitrarily chosen, used for metrics\n  dashboardLink: \"/\",\n  logo: \"/assets/logo-sm.svg\",\n  colors: {\n    main: \"#0BB489\",\n    secondary: \"#58E1A5\",\n  },\n};\n```\n\n#### Supporting files\n\n- [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.\n- [types.d.ts](https://github.com/RequestNetwork/invoicing-template/blob/main/types.d.ts) - Specify types to avoid TypeScript errors.\n\n## Features\n\n| Feature                                          | Status |\n| ------------------------------------------------ | ------ |\n| ERC20 Payment                                    | ✅     |\n| rnf_invoice format 0.3.0                         | ✅     |\n| Configure Logo and Colors                        | ✅     |\n| Minimal Chains and Currencies                    | ✅     |\n| Support Wallet Connectors other than Web3Onboard | ❌     |\n| Accept Request                                   | ❌     |\n| Cancel Request                                   | ❌     |\n| Add Stakeholder                                  | ❌     |\n| Native Payment                                   | ❌     |\n| Conversion Payment                               | ❌     |\n| Batch Payment                                    | ❌     |\n| Declarative Payment                              | ❌     |\n| Swap-to-Pay Payment                              | ❌     |\n| Swap-to-Conversion Payment                       | ❌     |\n| Escrow Payment                                   | ❌     |\n| Improved UI and UX                               | ❌     |\n| More Chains and Currencies                       | ❌     |\n| More Configuration Options                       | ❌     |\n| Attachments                                      | ❌     |\n\n## Chains and Currencies\n\n| Chain    | Currencies             |\n| -------- | ---------------------- |\n| Ethereum | USDC, USDT, DAI        |\n| Polygon  | USDC, USDT, DAI, USDCe |\n| Sepolia  | USDC, FAU              |\n\n## Additional Information\n\nFor more information, see the [Request Network documentation](https://docs.request.network/).\n","readmeFilename":"README.md"}