{"id":22042030,"url":"https://github.com/tokenmarketnet/walletconnect-wizard","last_synced_at":"2025-05-08T01:13:37.411Z","repository":{"id":39516784,"uuid":"190573032","full_name":"TokenMarketNet/walletconnect-wizard","owner":"TokenMarketNet","description":"A web component to integrate web3 wallets to your service easily","archived":false,"fork":false,"pushed_at":"2022-12-10T18:46:33.000Z","size":7231,"stargazers_count":7,"open_issues_count":22,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-08T01:13:31.838Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tokenmarket.net/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TokenMarketNet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-06T11:53:15.000Z","updated_at":"2022-05-13T10:51:09.000Z","dependencies_parsed_at":"2022-08-29T15:20:28.196Z","dependency_job_id":null,"html_url":"https://github.com/TokenMarketNet/walletconnect-wizard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TokenMarketNet%2Fwalletconnect-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TokenMarketNet%2Fwalletconnect-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TokenMarketNet%2Fwalletconnect-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TokenMarketNet%2Fwalletconnect-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TokenMarketNet","download_url":"https://codeload.github.com/TokenMarketNet/walletconnect-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252978783,"owners_count":21834917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-30T12:10:55.285Z","updated_at":"2025-05-08T01:13:37.386Z","avatar_url":"https://github.com/TokenMarketNet.png","language":"TypeScript","readme":"# WalletConnect Wizard\n\nThis is a web component to integrate [WalletConnect](https://www.myetherwallet.com/) token and cryptocurrency wallets to your service easily. \n\nWe believe that separating the concerns of service providers and value storages increases security and privacy of Internet. However this so called Web3 principle is also a novel concept for a lot of users and education in this area is needed. WalletConnect Wizard is a component designed to provide a smooth user experience for helping users to install, start using, confirm transactions and see their tokens in their third party wallets.\n\nWe support different kind of wallet mechanisms (see below), though the emphasis is on WalletConnect wallets as they are more secure due to running on a separate hardened mobile device. \n\n# Goals \n\n* A component for web and mobile service developers\n* Easy to integrate to your site - providing a bundled JS and CSS option\n* Explain new users what is a wallet and why it is needed\n* Support both WalletConnect (mobile) and web3.js/MetaMask (desktop) style wallets\n* Support multiple blockchains: Ethereum, Binance, otehrs\n* Maintain list of logos, names and install locations of supported wallets\n* Multimodal - automatically adapt styles and installation links depending on the platform: desktop, iOS, Android\n\n# Demo\n\n* [See live demo](https://tokenmarketnet.github.io/walletconnect-wizard/demo/index.html)\n\n# Usage\n\nWe currently provide an UMD build, which should be usable directly from the browser, and a CommonJS build.\n\n```html\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript src=\"./dist/umd/walletconnect-wizard.js\"\u003e\u003c/script\u003e\n```\n\n```javascript\nwalletConnectWizard.init('root', {\n    onConnect: function(response) {\n        alert(\"You are connected with: \" + response.type);\n        response.provider.sendAsync({\n            method: 'eth_accounts',\n            params: [],\n        }, function(error, params)  {\n            var account = params.result[0];\n            alert(\"Your ethereum account is:\" + account);\n        });\n    }\n});\n```\n\nUsage with ES6/Typescript and React:\n\n```javascript\nimport { Wizard } from 'walletconnect-wizard';\n\n\u003cWizard\n    onConnect={(response) =\u003e {\n        // do stuff\n    }}\n/\u003e\n```\n\nThe response object API is to be fully designed, but it looks something like this:\n\n```typescript\nexport interface ConnectionResponse {\n    type: ConnectionType;                   // 'walletconnect' or 'browser'\n    provider: any;                          // asyncSendable provider that can be passed to new Web3(...)\n                                            // for MetaMask, this will be window.ethereum\n                                            // for WalletConnect, we use @walletconnect/web-provider\n    web3: any;                              // currently always null, maybe Web3 object in the future\n    walletConnector: WalletConnect | null;  // WalletConnect object, or null if connected using MetaMask\n}\n```\n\n# Development\n\nWe use StoryBook for easy local development:\n\n```\n$ yarn\n$ yarn start\n```\n\nBuilding:\n\n```\n$ yarn build\n```\n\nUpdating github pages (live demo):\n\n```\n$ git checkout gh-pages\n$ git merge master\n$ rm -rf dist\n$ yarn build\n$ git add --force dist\n$ git commit -m \"Update gh-pages\"\n$ git push origin gh-pages\n```\n\nAnalyzing built bundle size:\n\n```\n$ yarn analyze-bundle\n```\n\nThis opens a server in http://localhost:8888/, where you can see a visual representation of the bundle contents.\n\n\n# UI mockups\n\n* [See LucidChart mock ups](https://www.lucidchart.com/documents/view/741793a6-be73-4ee4-8709-46e811ffe4c1)\n\n# Eligible wallets\n\nWe are currently focusing on wallets that can directly interact with smart contracts and blockchain. Wallets that do only transfer-of-value only are out of the scope\n\nFor Ethereum the wallet must pass all tests on [example.walletconnect.org](https://example.walletconnect.org)\n\n## Different wallet categories\n\nWe can roughly classify how wallets and web services interact\n\n* Mobile wallets that connect to your service by reading a [WalletConnect](https://walletconnect.org) QR code on a desktop page\n* Desktop web browser extensions (MetaMask)\n* Wallet integrated in a desktop web browser (Opera, Brave)\n* Wallet integrated in a mobile browser (Opera for Android)\n* Mobile app that integrates a WebView web browser (Status.im)\n* Desktop wallet apps that connect via localhost socket (Scatter for EOS)\n\nLimitations between if your wallet integrates a browser or a browser integrates a wallet comes obvious when you try to interact with third party sign in services like Facebook and Google.\n\n# Wallet database entries\n\n* *id*: internal id\n* *name*: Human readable brand name\n* *homepage*: Link to the homepage\n* *support*: Link to the support - displayed on connection page if the user is having issues\n* *blockchains*: ids of supported blockchains - currently `ethereum` and `binance`\n* *install*: direct installation links to different platform\n* *operations*: what kind of operations this support: transactions, message signing, etc.\n\n# TODO\n\n* Generate wallet list from database json\n* Detect mobile browsers and don't show QR-code\n* Provide multiple build targets: [x] UMD (named walletconnect-wizard.js), [x] CommonJS, [ ] esmodule\n* Strip down the build size\n* Finalize response (maybe return Web3 object there)\n* Better documentation (document finalized response object and props to pass to `init` and `Wizard`)\n* Configure TSLint\n\n# License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokenmarketnet%2Fwalletconnect-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftokenmarketnet%2Fwalletconnect-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftokenmarketnet%2Fwalletconnect-wizard/lists"}