{"id":21429750,"url":"https://github.com/limechain/web3-examples","last_synced_at":"2025-03-16T21:44:08.657Z","repository":{"id":66172819,"uuid":"594991535","full_name":"LimeChain/web3-examples","owner":"LimeChain","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-26T19:02:04.000Z","size":501,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-23T08:18:03.533Z","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/LimeChain.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-30T06:49:48.000Z","updated_at":"2023-02-17T06:59:16.000Z","dependencies_parsed_at":"2024-11-22T22:29:15.649Z","dependency_job_id":null,"html_url":"https://github.com/LimeChain/web3-examples","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/LimeChain%2Fweb3-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LimeChain%2Fweb3-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LimeChain%2Fweb3-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LimeChain%2Fweb3-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LimeChain","download_url":"https://codeload.github.com/LimeChain/web3-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243940062,"owners_count":20372044,"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-22T22:19:03.190Z","updated_at":"2025-03-16T21:44:08.638Z","avatar_url":"https://github.com/LimeChain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LimeAcademy examples\n\nFew examples for LimeAcademy.\n\n## 📌 Prerequisites\n\nIf you are Windows user please consider using a proper [terminal app](https://hyper.is/).\n\n[Node.js](https://nodejs.org/en/) is required to install dependencies and run project.\n\nRecommended Node.js version: `18.13.0`\n\nIf you use another version, please use [n](https://github.com/tj/n) to manage.\n\nOptionally [Yarn](https://classic.yarnpkg.com/lang/en/docs/install) could be used instead of `npm`.\n\nFor optimal developer friendly experience use [Visual Studio Code](https://code.visualstudio.com/) and install the following plugins:\n\n- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - High level code formatter\n- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - More customisable code formatter\n- [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - React code snippets and autocomplete\n\nA Web3 wallet is required as well. In our case we use [Metamask](https://metamask.io/). Project contracts are deployed at [Sepolia test network](https://metamask.zendesk.com/hc/en-us/articles/360059213492-ETH-on-Sepolia-and-Goerli-networks-testnets-) so please [change](https://medium.com/@mwhc00/how-to-enable-ethereum-test-networks-on-metamask-again-d7831da23a09) to that network in Metamask.\n\n## 🗄 Project description, structure and functionalities\n\nProject uses [React.js](https://reactjs.org/) and it's bootstraped via [Create React app](https://create-react-app.dev/).\n\n**Folders and files**\n\n- `.vscode` - Some VSCode settings\n- `public` - Public folder for assets like fonts and images\n- `src` - Source code for the app, here is all the logic and functionalities\n  - `abi` - Compiled json files by the contracts, used for contract interaction with `ethers.js`\n  - `components` - React.js component files containing logic for specific behaviours, see more detials below\n  - `pages` - Pages components defining the high level app information architecture\n  - `style` - `scss` styling files, see more details below\n  - `utils` - some helpers functions\n  - `index.js` - initial point for boostraping the react.js project\n\nFor styling the app, we use sightly extended Bootstrap 5 version with scss. All the needed style variables are in `src/style/_variables.scss` and new styles can be added in `src/style/style.scss`\n\n**Web3 connection**\n\nIn order to connect to a blockchain node we need a special library called [wagmi](https://wagmi.sh/react/getting-started).\nThis library provides react hooks and components for easier connection.\nIn `src/components/App.jsx` we import couple of components and variables for the connection:\n\n```javascript\nimport { WagmiConfig, createConfig, configureChains } from 'wagmi';\nimport { infuraProvider } from 'wagmi/providers/infura';\nimport { sepolia } from 'wagmi/chains';\n```\n\nAfter that we get an Infura provider, we need to pass the API KEY:\n\n```javascript\nconst { publicClient, webSocketPublicClient } = configureChains(\n  [sepolia],\n  [infuraProvider({ apiKey: 'YOUR_INFURA_KEY' })],\n);\n```\n\nThen we initialize a config object with the `client`:\n\n```javascript\nconst config = createConfig({\n  autoConnect: true,\n  publicClient,\n  webSocketPublicClient,\n});\n```\n\nKeep in mind that the provider is a public one and **does not contain** a signer!\n\nAnd finally wrap our application with a `WagmiConfig` component and a `config` prop provided:\n\n```javascript\n\u003cWagmiConfig config={config}\u003e...\u003c/WagmiConfig\u003e\n```\n\nNow we can use some of the [hooks](https://wagmi.sh/react/hooks/useAccount) provided by `wagmi` library.\n\nIn `src/components/Header.jsx` we are using the `useConnect`, `useAccount` and `useBalance` hooks in order to get data for the connection, user address and user balance.\n\nWe can check the connection status with the `isConnected` function and to connect to the node with the `connect` function.\n\n```javascript\nconst { isConnected, address } = useAccount();\nconst { connect, isLoading } = useConnect({\n  connector,\n});\n```\n\nIn our case for the connection we are using Metamask as a provider and signer by importing the Metamask connector:\n\n```javascript\nimport { MetaMaskConnector } from 'wagmi/connectors/metaMask';\n```\n\ninitialising a `connector` object with the desired chain (imported also from `wagmi`):\n\n```javascript\nconst connector = new MetaMaskConnector({\n  chains: [sepolia],\n  options: {\n    shimDisconnect: true,\n    UNSTABLE_shimOnConnectSelectAccount: true,\n  },\n});\n```\n\nand providing the `connector` to the `useConnect` hook:\n\n```javascript\nconst { connect, isLoading } = useConnect({\n  connector,\n});\n```\n\n## ⚙️ Install dependencies\n\n```shell\nyarn\n```\n\nor\n\n```shell\nnpm i\n```\n\n## 🚀 Available Scripts\n\nIn the project directory, you can run:\n\n```shell\nyarn start\n```\n\nor\n\n```shell\nnpm start\n```\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in your browser.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimechain%2Fweb3-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flimechain%2Fweb3-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimechain%2Fweb3-examples/lists"}