{"id":19498137,"url":"https://github.com/patrickalphac/html-js-ethers-connect","last_synced_at":"2025-04-25T22:33:17.176Z","repository":{"id":39639126,"uuid":"453777296","full_name":"PatrickAlphaC/html-js-ethers-connect","owner":"PatrickAlphaC","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-30T06:16:55.000Z","size":189,"stargazers_count":31,"open_issues_count":2,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-04T01:09:17.380Z","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-01-30T19:17:17.000Z","updated_at":"2023-02-15T12:08:52.000Z","dependencies_parsed_at":"2022-07-13T10:30:41.035Z","dependency_job_id":null,"html_url":"https://github.com/PatrickAlphaC/html-js-ethers-connect","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fhtml-js-ethers-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fhtml-js-ethers-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fhtml-js-ethers-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickAlphaC%2Fhtml-js-ethers-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PatrickAlphaC","download_url":"https://codeload.github.com/PatrickAlphaC/html-js-ethers-connect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224019638,"owners_count":17242176,"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-10T21:49:20.751Z","updated_at":"2024-11-10T21:49:22.317Z","avatar_url":"https://github.com/PatrickAlphaC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-js-ethers-connect\n\nA small html file to show how to connect with metamask from the front-end. This is a minimalistic example what you can find in the [metamask docs](https://docs.metamask.io/guide/create-dapp.html#basic-action-part-1).\n\nYou can also check out the following editions for working with es6 syntax:\n\n```\ngit checkout raw-js\ngit checkout vitejs\n```\n\n# Requirements\n\n- [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)\n  - You'll know you've installed it right if you can run:\n    - `git --version`\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 npm right if you can run:\n    - `npm --version` And get an ouput like `x.x.x`\n    - You might need to install it with npm\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\n# Quickstart\n\n1. Clone the repo, install dependencies, and create the build.\n\n```\ngit clone https://github.com/PatrickAlphaC/front-end-metamask-button\ncd front-end-metamask-button\nyarn\nyarn build\n```\n\n2. Serve the file\n\n```\nyarn http-server\n```\n\nAnd you'll see an output like:\n\n```\nAvailable on:\n  http://127.0.0.1:8080\n  http://x.x.x.x:8080\nHit CTRL-C to stop the server\n```\n\nCopy paste the first link into your browser, and you should see a small button that says \"connect\".\n\n![Connect](connect.png)\n\nHit it, and you should see metamask pop up.\n\n# Execute a transaction\n\nIf you want to execute a transaction follow this:\n\nMake sure you have the following installed:\n\n1. 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\nyarn hardhat node\n```\n\nThis will deploy a sample contract and start a local hardhat blockchain.\n\n2. Update your `index.js` with the new contract address.\n\nIn your `index.js` file, update the variable `contractAddress` with the address of the deployed contract. You'll see it near the top of the hardhat output.\n\n3. Rebuild\n\n```\nyarn build\n```\n\n4. 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\n5. Reserve the front end with `yarn http-server`, and then hit the `Execute` button after connecting\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%2Fhtml-js-ethers-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickalphac%2Fhtml-js-ethers-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickalphac%2Fhtml-js-ethers-connect/lists"}