{"_id":"@dharitri-sdk/webview-provider","name":"@dharitri-sdk/webview-provider","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dharitri-sdk/webview-provider","version":"0.0.1","description":"SDK Webview Provider","main":"out/index.js","types":"out/index.d.js","scripts":{"compile":"tsc -p tsconfig.json","pretest":"npm run compile","prepare":"npm run compile"},"author":{"name":"Dharitri"},"license":"GPL-3.0-or-later","devDependencies":{"@dharitri-sdk/core":"0.0.1","@dharitri-sdk/dapp-utils":"0.0.1","prettier":"3.2.5","typescript":"5.4.5"},"peerDependencies":{"@dharitri-sdk/core":"0.0.1","@dharitri-sdk/dapp-utils":"0.0.1"},"gitHead":"d0cfc92c701637c07f81adcba08eb89dc3858598","_id":"@dharitri-sdk/webview-provider@0.0.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-vWMpABd3O+LVj1hCdl7trlZd6Tdh6BJuvqFeeDkY725HJQ/WL1h0ED6vyHiMslCw3+e9VtdSqkWJPfsXmTeDmA==","shasum":"e9f8921f9eefb1895cbb8b65cc63d93c447193b7","tarball":"https://registry.npmjs.org/@dharitri-sdk/webview-provider/-/webview-provider-0.0.1.tgz","fileCount":24,"unpackedSize":29198,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTstpn8Yh32cDYDALY25lJw1Ej5niXaFpy4mBvYmwZKAiBgYc1WNjZhilDB2puY84ida2HNWFDBaEqPj/EoYm852A=="}]},"_npmUser":{"name":"xfactor-toml","email":"xfactor.toml@gmail.com"},"directories":{},"maintainers":[{"name":"xfactor-toml","email":"xfactor.toml@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/webview-provider_0.0.1_1730366418213_0.5357739569851221"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-31T09:20:18.087Z","0.0.1":"2024-10-31T09:20:18.444Z","modified":"2024-10-31T09:20:18.753Z"},"maintainers":[{"name":"xfactor-toml","email":"xfactor.toml@gmail.com"}],"description":"SDK Webview Provider","author":{"name":"Dharitri"},"license":"GPL-3.0-or-later","readme":"# drt-sdk-js-webview-provider\n\nThis provider is used to interact with the Dharitri dApps in a webview environment.\nIt facilitates the communication between the host application (wallet) and the dApp.\n\n## Distribution\n\n[npm](https://www.npmjs.com/package/@dharitri-sdk/webview-provider)\n\n## Installation\n\n`sdk-webview-provider` is delivered via [npm](https://www.npmjs.com/package/@dharitri-sdk/webview-provider), therefore it can be installed as follows:\n\n```\nnpm install @dharitri-sdk/webview-provider\n```\n\n### Building the library\n\nIn order to compile the library, run the following:\n\n```\nnpm install\nnpm run compile\n```\n\n## Usage\n\n### Parent window\n\n```html\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <title>Webview Provider Example</title>\n</head>\n\n<body>\n    <iframe id=\"webviewChild\" src=\"http://child_URL/webviewChild.html\" style=\"width: 100%; height: 200px;\"></iframe>\n\n    <script>\n        // SigningProvider is one of the possible signing providers (extension, hardware wallet, etc.)\n        const signingProvider = new SigningProvider();\n\n        const webviewChild = document.getElementById(\"webviewChild\");\n        const targetWindow = webviewChild.contentWindow;\n\n        window.addEventListener(\"message\", async e => {\n            const { type, payload } = e.data;\n\n            switch (type) {\n                case \"LOGIN_REQUEST\":\n                    const address = await signingProvider.login();\n                    \n                    // generate accessToken using native auth client\n                    const accessToken = \"ZXJkMXdqeXRmbjZ6aHFmY3NlanZod3Y3cTR1c2F6czVyeWMzajhoYzc4ZmxkZ2pueWN0OHdlanFrYXN1bmM.Ykc5allXeG9iM04wLmY2ODE3NzUxMDc1NmVkY2U0NWVjYTg0Yjk0NTQ0YTZlYWNkZmEzNmU2OWRmZDNiOGYyNGM0MDEwZDE5OTA3NTEuMzAwLmV5SjBhVzFsYzNSaGJYQWlPakUyTnpNNU56SXlORFI5.a29dba3f0d2fb4712cb662bc8050c87bf9f0e7fd28f3c98efe0fda074be5b087bd75c075243e832c2985a9da044496b2cff3c852c8c963f9d3d840aed8799c07\";\n\n                    targetWindow?.postMessage({\n                        type: \"LOGIN_RESPONSE\",\n                        payload: {\n                            data: {\n                                address,\n                                accessToken\n                            }\n                        },\n                    })\n                    break;\n                case \"SIGN_TRANSACTIONS_REQUEST\":\n                    const transactions = payload;\n                    const signedTransactions = await signingProvider.signTransactions(transactions);\n\n                    targetWindow?.postMessage({\n                        type: \"SIGN_TRANSACTIONS_RESPONSE\",\n                        payload: {\n                            data: signedTransactions\n                        },\n                    })\n                    break;\n                case \"SIGN_MESSAGE_REQUEST\":\n                    const messageToSign = payload?.message;\n\n                    const signedMessage = await signingProvider.signMessage(messageToSign);\n\n                    targetWindow?.postMessage({\n                        type: \"SIGN_MESSAGE_RESPONSE\",\n                        payload: {\n                            data: {\n                                signature: signedMessage.signature,\n                                status: \"signed\"\n                            }\n                        },\n                    })\n                    break;\n                default:\n                    // handle other message types\n                    break;\n            }\n        })\n    </script>\n</body>\n</html>\n```\n\n### Child window\n\n```html\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <title>Webview Provider Example (Child Window)</title>\n</head>\n\n<body>\n    <div>\n        <button onclick=\"webview.relogin()\">Relogin</button>\n        <button onclick=\"webview.signTransactions()\">Sign transactions</button>\n        <button onclick=\"webview.signMessage()\">Sign message</button>\n        <button onclick=\"webview.logout()\">Logout</button>\n    </div>\n\n    <script>\n        const webview = new WebviewProvider.getInstance({\n            resetStateCallback: () => console.log(\"Reset state callback called\"),\n        });\n    </script>\n</body>\n\n</html>\n```\n\n# !!! Important !!!\nUsing [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview), you need to register an object to be the handler for a particular message: `jsHandler`. \n\nEvery message (action like `login`, `signMessage`, etc.) sent from the child webview is using the `jsHandler` object to send the message to the parent window. Eg. `window.webkit.messageHandlers.jsHandler.postMessage({ type: \"LOGIN_REQUEST\" });`\n\nIt's developer's responsibility to handle the message in the parent window and call the appropriate method on the `webview` object.","readmeFilename":"README.md"}