{"id":23346530,"url":"https://github.com/smallruraldog/web3modal-vue","last_synced_at":"2025-04-09T22:16:49.863Z","repository":{"id":47608944,"uuid":"381312572","full_name":"SmallRuralDog/web3modal-vue","owner":"SmallRuralDog","description":"A single Web3 / Ethereum provider solution for all Wallets","archived":false,"fork":false,"pushed_at":"2023-04-10T10:57:43.000Z","size":23303,"stargazers_count":110,"open_issues_count":19,"forks_count":68,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T22:16:42.528Z","etag":null,"topics":["arkane","authereum","crypto","ethereum","fortmatic","frame","metamask","portis","torus","vueweb3","walletconnect","web3","web3modal","web3modalvue","web3vue"],"latest_commit_sha":null,"homepage":"https://smallruraldog.github.io/web3modal-vue/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SmallRuralDog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-29T09:38:38.000Z","updated_at":"2024-12-22T17:54:36.000Z","dependencies_parsed_at":"2025-02-02T05:20:47.641Z","dependency_job_id":null,"html_url":"https://github.com/SmallRuralDog/web3modal-vue","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/SmallRuralDog%2Fweb3modal-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallRuralDog%2Fweb3modal-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallRuralDog%2Fweb3modal-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmallRuralDog%2Fweb3modal-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmallRuralDog","download_url":"https://codeload.github.com/SmallRuralDog/web3modal-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119288,"owners_count":21050755,"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":["arkane","authereum","crypto","ethereum","fortmatic","frame","metamask","portis","torus","vueweb3","walletconnect","web3","web3modal","web3modalvue","web3vue"],"created_at":"2024-12-21T07:14:01.576Z","updated_at":"2025-04-09T22:16:49.820Z","avatar_url":"https://github.com/SmallRuralDog.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web3ModalVue\n\nA single Web3 / Ethereum provider solution for all Wallets\n\n## Introduction\n\nWeb3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration.\n\nBy default Web3Modal Library supports injected providers like (**Metamask**, **Dapper**, **Gnosis Safe**, **Frame**, Web3 Browsers, etc) and **WalletConnect**, You can also easily configure the library to support **Portis**, **Fortmatic**, **Squarelink**, **Torus**, **Authereum**, **D'CENT Wallet** and **Arkane**.\n\n## React\n[web3modal](https://github.com/Web3Modal/web3modal)\n\n## Usage\n\n1. Install Web3Modal NPM package\n\n```bash\nnpm install --save web3modal-vue\n\n# OR\n\nyarn add web3modal-vue\n```\n\n2. Install Provider packages\n\n```js\n/* See Provider Options Section */\n```\n\n3. Then you can add Web3Modal to your Dapp as follows\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cweb3-modal-vue\n        ref=\"web3modal\"\n        :theme=\"theme\"\n        :provider-options=\"providerOptions\"\n        cache-provider\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport Web3ModalVue from \"web3modal-vue\";\nimport WalletConnectProvider from \"@walletconnect/web3-provider\";\nimport {web3Modal} from \"./config/mixins\";\nimport Header from \"@/components/Header\";\n\nexport default {\n  components: {\n    Header,\n    Web3ModalVue\n  },\n  mixins: [web3Modal],\n  data() {\n    return {\n      theme: 'light',\n      providerOptions: {\n        walletconnect: {\n          package: WalletConnectProvider,\n          options: {\n            infuraId: \"-\"\n          }\n        }\n      },\n      number: 0,\n      balance: 0,\n    }\n  },\n  created() {\n    if (window.matchMedia \u0026\u0026 window.matchMedia('(prefers-color-scheme: dark)').matches) {\n      this.theme = 'dark'\n    }\n  },\n  mounted() {\n    this.$nextTick(async () =\u003e {\n      const web3modal = this.$refs.web3modal;\n      this.$store.commit('setWeb3Modal', web3modal)\n      if (web3modal.cachedProvider) {\n        await this.$store.dispatch('connect')\n        this.subscribeMewBlockHeaders()\n      }\n\n    })\n  },\n  methods: {\n    connect() {\n      this.$store.dispatch('connect')\n    },\n  }\n}\n\u003c/script\u003e\n```\n\n```js\nimport {getLibrary} from \"@/utils/web3\";\nimport {ethers} from \"ethers\";\nimport {parseInt} from 'lodash'\n\nconst web3ModalStore = {\n    state: {\n        web3Modal: null,\n\n        library: getLibrary(),\n        active: false,\n        account: null,\n        chainId: 0,\n    },\n    mutations: {\n        setWeb3Modal(state, web3Modal) {\n            state.web3Modal = web3Modal\n        },\n        setLibrary(state, library) {\n            state.library = library\n        },\n        setActive(state, active) {\n            state.active = active\n        },\n        setAccount(state, account) {\n            state.account = account\n        },\n        setChainId(state, chainId) {\n            state.chainId = chainId\n        }\n    },\n    actions: {\n        async connect({state, commit, dispatch}) {\n            const provider = await state.web3Modal.connect();\n\n            const library = new ethers.providers.Web3Provider(provider)\n\n            library.pollingInterval = 12000\n            commit('setLibrary', library)\n\n            const accounts = await library.listAccounts()\n            if (accounts.length \u003e 0) {\n                commit('setAccount', accounts[0])\n            }\n            const network = await library.getNetwork()\n            commit('setChainId', network.chainId)\n            commit('setActive', true)\n\n            provider.on(\"connect\", async (info) =\u003e {\n                let chainId = parseInt(info.chainId)\n                commit('setChainId', chainId)\n                console.log(\"connect\", info)\n            });\n\n            provider.on(\"accountsChanged\", async (accounts) =\u003e {\n                if (accounts.length \u003e 0) {\n                    commit('setAccount', accounts[0])\n                } else {\n                    await dispatch('resetApp')\n                }\n                console.log(\"accountsChanged\")\n            });\n            provider.on(\"chainChanged\", async (chainId) =\u003e {\n                chainId = parseInt(chainId)\n                commit('setChainId', chainId)\n                console.log(\"chainChanged\", chainId)\n            });\n\n        },\n        async resetApp({state, commit}) {\n            try {\n                await state.web3Modal.clearCachedProvider();\n            } catch (error) {\n                console.error(error)\n            }\n            commit('setAccount', null)\n            commit('setActive', false)\n            commit('setLibrary', getLibrary())\n        },\n    }\n}\nexport default web3ModalStore;\n```\n\n## Provider Options\n\nThese are all the providers available with Web3Modal and how to configure their provider options:\n\n- [WalletConnect](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/walletconnect.md)\n- [Fortmatic](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/fortmatic.md)\n- [Torus](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/torus.md)\n- [Portis](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/portis.md)\n- [Authereum](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/authereum.md)\n- [Frame](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/frame.md)\n- [Bitski](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/bitski.md)\n- [Arkane](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/arkane.md)\n- [DCent](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/dcent.md)\n- [BurnerConnect](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/burnerconnect.md)\n- [MEWConnect](https://github.com/Web3Modal/web3modal/blob/master/docs/providers/mewconnect.md)\n\n## Who using it\n\n[Submit my Dapp](https://github.com/SmallRuralDog/web3modal-vue/issues/1)\n\n## Example\n[https://github.com/SmallRuralDog/web3modal-vue/tree/master/example](https://github.com/SmallRuralDog/web3modal-vue/tree/master/example)\n\n## Demo\n[https://smallruraldog.github.io/web3modal-vue](https://smallruraldog.github.io/web3modal-vue/#/)\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallruraldog%2Fweb3modal-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmallruraldog%2Fweb3modal-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmallruraldog%2Fweb3modal-vue/lists"}