{"_id":"@ariesgun/create-invoice-form","_rev":"3-00dd0536d9f6002f82ff718b84277060","name":"@ariesgun/create-invoice-form","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form)","dist-tags":{"latest":"0.5.4"},"versions":{"0.5.1":{"name":"@ariesgun/create-invoice-form","version":"0.5.1","license":"MIT","_id":"@ariesgun/create-invoice-form@0.5.1","dist":{"shasum":"d4292e60bb03e8a8deb025d95e24ab20b52d2355","tarball":"https://registry.npmjs.org/@ariesgun/create-invoice-form/-/create-invoice-form-0.5.1.tgz","fileCount":23,"integrity":"sha512-YK51Qhn22oCRN4b1LbZyIBHhw8oKQ/btlr/ptLeyqkWlpSSfSU9oq1a2wHK4wBxKWVIEeEoucBafUbZV8A6Lww==","signatures":[{"sig":"MEQCIGERN+zbYq4hs0yMMYudycy6VTmYOgHzCTaC4iiuXeZjAiAAm5k9KQveHITrBjW6vht9/uiOhDuqTcvXoKJ9BQA87w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42307994},"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":"8e7aa07dae434092008a122861f1556078fc5cd6","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%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form)","directories":{},"_nodeVersion":"20.14.0","dependencies":{"viem":"^2.9.15","svelte":"^4.0.5","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","stream-browserify":"^3.0.0","@requestnetwork/shared":"0.4.0","@requestnetwork/web3-signature":"0.5.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","publint":"^0.2.7","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/create-invoice-form_0.5.1_1719403716328_0.3966525545368649","host":"s3://npm-registry-packages"}},"0.5.2":{"name":"@ariesgun/create-invoice-form","version":"0.5.2","license":"MIT","_id":"@ariesgun/create-invoice-form@0.5.2","dist":{"shasum":"8f15286f0d06892c463dd5b1b8975ab574a4fb94","tarball":"https://registry.npmjs.org/@ariesgun/create-invoice-form/-/create-invoice-form-0.5.2.tgz","fileCount":23,"integrity":"sha512-8G9dTRELOwKtDrYt6/gWQzRRMBlZhnaapSKIY4wrhWg8DrNPj17UPOWtuiuAdzd3tMEPKlCEukqYxIFdULyZkw==","signatures":[{"sig":"MEYCIQCakC9b+uOMXbHG6+IeuQcXgkF5l9ZslRPFEdIR7qhFEgIhANYSSTTPULszMgQLfBnKUg/zTEvI+xKydX0zgY+h7Owu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37240782},"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":"935d942496042d587d57e061429741d7675e3bfd","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":"9.8.1","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form)","directories":{},"_nodeVersion":"18.20.3","dependencies":{"viem":"^2.9.15","svelte":"^4.0.5","browserify-zlib":"^0.2.0","@ariesgun/shared":"0.4.1","crypto-browserify":"^3.12.0","stream-browserify":"^3.0.0","@requestnetwork/web3-signature":"0.6.1-next.2043","@requestnetwork/request-client.js":"0.47.1-next.2043"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.2","tslib":"^2.4.1","assert":"^2.1.0","publint":"^0.2.7","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/create-invoice-form_0.5.2_1719600622861_0.2864361381470839","host":"s3://npm-registry-packages"}},"0.5.3":{"name":"@ariesgun/create-invoice-form","version":"0.5.3","license":"MIT","_id":"@ariesgun/create-invoice-form@0.5.3","dist":{"shasum":"23189993c00e707b32f5c42208a43860a44ceb7c","tarball":"https://registry.npmjs.org/@ariesgun/create-invoice-form/-/create-invoice-form-0.5.3.tgz","fileCount":23,"integrity":"sha512-OOt5bYWMrmohvi1bgpcCICwLcJBsCmD4FqM2MNylizesW8bEcoo2YxD0n+W0DCzJKj2XFBCpzRbCCs1gP3xv2g==","signatures":[{"sig":"MEYCIQCOflEj2HiBYrM5v4lJ2H9I1l4cAsustN51BydGQt884AIhAMgAsiuiveLu/Q3nfo9Fu6Ro2VKTKxCmJ0q7cIAe+B98","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37261673},"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":"45e391f54061df81e3d620b96700cb3e86b8c40c","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%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form)","directories":{},"_nodeVersion":"18.20.3","dependencies":{"viem":"^2.9.15","svelte":"^4.0.5","browserify-zlib":"^0.2.0","@ariesgun/shared":"0.4.1","crypto-browserify":"^3.12.0","stream-browserify":"^3.0.0","@requestnetwork/web3-signature":"0.6.1-next.2045","@requestnetwork/request-client.js":"0.47.1-next.2045"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.2","tslib":"^2.4.1","assert":"^2.1.0","publint":"^0.2.8","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/create-invoice-form_0.5.3_1719609123673_0.6898872126730045","host":"s3://npm-registry-packages"}},"0.5.4":{"name":"@ariesgun/create-invoice-form","version":"0.5.4","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":{"@requestnetwork/request-client.js":"0.47.1-next.2045","@ariesgun/shared":"0.4.1","@requestnetwork/web3-signature":"0.6.1-next.2045","browserify-zlib":"^0.2.0","crypto-browserify":"^3.12.0","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","publint":"^0.2.8","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/create-invoice-form@0.5.4","gitHead":"099c872feca269eea29b16a0e821769e5d6b0ed5","description":"[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form)","_nodeVersion":"18.20.3","_npmVersion":"10.7.0","dist":{"integrity":"sha512-LE+zClN70aZrtzccj8sd4ilbTNlTTrDjq7LqboGkUUPz0ajf+MC+1ov7Zlhe2C243Woy95DGTFQ/fELB2uqlMA==","shasum":"10d3f6a73b18e7ba3c490ab41d120f85e3783cb3","tarball":"https://registry.npmjs.org/@ariesgun/create-invoice-form/-/create-invoice-form-0.5.4.tgz","fileCount":23,"unpackedSize":37267872,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgV56v9tPpgXuS+SKqQ+vOW0tqOFGRh29C1wl3Yhjq+AiArzItJwwmo8m2xZxKkeqjR74VAY5QV6G5rPD20uR9tYQ=="}]},"_npmUser":{"name":"ariesgun","email":"aries.thio@hotmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/create-invoice-form_0.5.4_1719848002826_0.4563335481423383"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-26T12:08:36.139Z","modified":"2024-07-01T15:33:23.283Z","0.5.1":"2024-06-26T12:08:36.654Z","0.5.2":"2024-06-28T18:50:23.257Z","0.5.3":"2024-06-28T21:12:04.023Z","0.5.4":"2024-07-01T15:33:23.132Z"},"maintainers":[{"name":"ariesgun","email":"aries.thio@hotmail.com"}],"license":"MIT","readme":"# Request Network Create Invoice Form Web Component\n\n[![npm version](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form.svg)](https://badge.fury.io/js/%40requestnetwork%2Fcreate-invoice-form)\n\nA web component for integrating the Request Network's Create Invoice Form into a web application.\n\n## Introduction\n\nThe Create Invoice Form component allows users to create 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/create-invoice-form\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 Create Invoice Form in a React application, you must _dynamically_ import `@requestnetwork/create-invoice-form` and use the component in your JSX file.\n>\n> ```tsx\n> import(\"@requestnetwork/create-invoice-form\");\n> ```\n\n> **ℹ️ 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.\n\n#### [create-invoice.tsx](https://github.com/RequestNetwork/invoicing-template/blob/main/pages/create-invoice.tsx)\n\nConfigure 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 .\n\n```tsx\nimport(\"@requestnetwork/create-invoice-form\");\nimport { useEffect, useRef } from \"react\";\nimport { config } from \"@/utils/config\";\nimport { useAppContext } from \"@/utils/context\";\nimport { CreateInvoiceFormProps } from \"@/types\";\n\nexport default function CreateInvoiceForm() {\n const formRef = useRef(null);\n const { wallet, requestNetwork } = useAppContext();\n\n useEffect(() => {\n if (formRef.current) {\n formRef.current.config = config;\n\n if (wallet && requestNetwork) {\n formRef.current.signer = wallet.accounts[0].address;\n formRef.current.requestNetwork = requestNetwork;\n }\n }\n }, [wallet, requestNetwork]);\n\n return (\n
\n \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 create invoice form 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 Request | ✅ |\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| Native Request | ❌ |\n| Conversion Request | ❌ |\n| Swap-to-Pay Request | ❌ |\n| Swap-to-Conversion Request | ❌ |\n| Escrow Request | ❌ |\n| Improved UI and UX | ❌ |\n| Auto-increment Invoice Number | ❌ |\n| Client Address List | ❌ |\n| Payment Recipient Address List | ❌ |\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"}