{"id":19498126,"url":"https://github.com/patrickalphac/nextjs-web3modal-metamask-connect","last_synced_at":"2025-08-22T14:07:44.322Z","repository":{"id":54013895,"uuid":"454238887","full_name":"PatrickAlphaC/nextjs-web3modal-metamask-connect","owner":"PatrickAlphaC","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-02T23:53:49.000Z","size":91,"stargazers_count":6,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-25T22:35:12.384Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/PatrickAlphaC.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":"2022-02-01T02:32:53.000Z","updated_at":"2023-11-23T10:00:41.000Z","dependencies_parsed_at":"2022-08-13T06:01:02.209Z","dependency_job_id":null,"html_url":"https://github.com/PatrickAlphaC/nextjs-web3modal-metamask-connect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PatrickAlphaC/nextjs-web3modal-metamask-connect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fnextjs-web3modal-metamask-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fnextjs-web3modal-metamask-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fnextjs-web3modal-metamask-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fnextjs-web3modal-metamask-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PatrickAlphaC","download_url":"https://codeload.github.com/PatrickAlphaC/nextjs-web3modal-metamask-connect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fnextjs-web3modal-metamask-connect/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271650860,"owners_count":24796725,"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","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10T21:49:18.789Z","updated_at":"2025-08-22T14:07:44.304Z","avatar_url":"https://github.com/PatrickAlphaC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs-web3modal-metamask-connect\n\nThis is a minimalistic project to show us how we can connect to metamask using [web3modal](https://github.com/Web3Modal/web3modal) in nextjs / react.\n\nThis could just as easily be done in typescript.\n\nThis project started with nexjs boilerplate by running `yarn create next-app nextjs-web3modal-metamask-connect`\n\nVideo Coming soon...\n\n- [nextjs-web3modal-metamask-connect](#nextjs-web3modal-metamask-connect)\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Quickstart](#quickstart)\n    - [Important localhost note](#important-localhost-note)\n- [Full Examples](#full-examples)\n- [Thank you!](#thank-you)\n\nVideo coming soon...\n\n# Getting Started\n\n## Requirements\n\n- [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)\n  - You'll know you did it right if you can run `git --version` and you see a response like `git version x.x.x`\n- [Nodejs \u0026 npm](https://nodejs.org/en/)\n  - You'll know you've installed nodejs right if you can run:\n    - `node --version` And get an ouput like: `vx.x.x`\n  - You'll know you've installed npx right if you can run:\n    - `npm --version` And get an ouput like: `x.x.x`\n- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/) instead of `npm`\n  - You'll know you've installed yarn right if you can run:\n    - `yarn --version` And get an output like: `x.x.x`\n    - You might need to install it with npm\n- [Metamask](https://metamask.io/)\n  - This is a browser extension that lets you interact with the blockchain.\n- A Testnet Kovan project [Alchemy URL](https://alchemy.com/?a=673c802981)\n\n## Quickstart\n\n1. Clone and install dependencies\n\n```\ngit clone https://github.com/PatrickAlphaC/nextjs-ethers-metamask-connect\ncd nextjs-ethers-metamask-connect\nyarn\n```\n\n2. Then, you'll need to open up a second terminal and run:\n\n```\ngit clone https://github.com/PatrickAlphaC/hardhat-simple-storage\ncd hardhat-simple-storage\nyarn hardhat node\n```\n\nThis will deploy a sample contract and start a local hardhat blockchain.\n\n3. Connect your [metamask](https://metamask.io/) to your local hardhat blockchain.\n\n\u003e **PLEASE USE A METAMASK ACCOUNT THAT ISNT ASSOCIATED WITH ANY REAL MONEY.**\n\u003e I usually use a few different browser profiles to separate my metamasks easily.\n\nIn the output of the above command, take one of the private key accounts and [import it into your metamask.](https://metamask.zendesk.com/hc/en-us/articles/360015489331-How-to-import-an-Account)\n\nAdditionally, add your localhost with chainid 31337 to your metamask.\n\n4. Add your [Alchemy URL](https://alchemy.com/?a=673c802981)\n\nCreate a file named `.env.local` and add the following:\n\n```\nNEXT_PUBLIC_RPC_URL=https://alchemy.com/kovan/asdfasdfasdf\n```\n\nBut add your kovan alchemy URL of course.\n\n5. Open the UI\n\nThen, back in your first terminal, run:\n\n```\nyarn dev\n```\n\n5. Hit buttons\n\nYou'll be brought to the UI after running `yarn dev` which has exactly 2 buttons. Hit `connect`, metamask, then hit `execute` and you'll send a transaction to your local hardhat.\n\n### Important localhost note\n\nIf you use metamask with a local network, everytime you shut down your node, you'll need to reset your account. Settings -\u003e Advanced -\u003e Reset account. Don't do this with a metamask you have real funds in.\n\n# Full Examples\n\n- [Web3Modal Example](https://github.com/ChangoMan/web3modal-example)\n- [Class based web3Modal](https://github.com/Web3Modal/web3modal/tree/master/example)\n- [Scaffold-ETH](https://github.com/scaffold-eth/scaffold-eth)\n\n# Thank you!\n\nIf you appreciated this, feel free to follow me or donate!\n\nETH/Polygon/Avalanche/etc Address: 0x9680201d9c93d65a3603d2088d125e955c73BD65\n\n[![Patrick Collins Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white)](https://twitter.com/PatrickAlphaC)\n[![Patrick Collins YouTube](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white)](https://www.youtube.com/channel/UCn-3f8tw_E1jZvhuHatROwA)\n[![Patrick Collins Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/patrickalphac/)\n[![Patrick Collins Medium](https://img.shields.io/badge/Medium-000000?style=for-the-badge\u0026logo=medium\u0026logoColor=white)](https://medium.com/@patrick.collins_58673/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickalphac%2Fnextjs-web3modal-metamask-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickalphac%2Fnextjs-web3modal-metamask-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickalphac%2Fnextjs-web3modal-metamask-connect/lists"}