{"id":22701398,"url":"https://github.com/multiqostechnologies/blockchain-transaction-chaining","last_synced_at":"2026-04-11T00:14:18.218Z","repository":{"id":265419583,"uuid":"895949659","full_name":"MultiQoSTechnologies/Blockchain-Transaction-Chaining","owner":"MultiQoSTechnologies","description":"Angular app showcasing Ethereum transactions using Web3.js. Features wallet connection, ETH transfers, and visual blockchain explorer with block and transaction details","archived":false,"fork":false,"pushed_at":"2024-11-29T12:08:49.000Z","size":782,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-04T20:15:28.505Z","etag":null,"topics":["angular","blockchain-technology","ethereum","ganache","metamask","node-js","remix","smart-contracts","solidity","typescript","web3"],"latest_commit_sha":null,"homepage":"https://multiqos.com/blockchain-development","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/MultiQoSTechnologies.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":"2024-11-29T08:44:55.000Z","updated_at":"2024-11-29T12:08:53.000Z","dependencies_parsed_at":"2024-11-29T12:22:35.208Z","dependency_job_id":"f0a79061-cb0f-4519-b221-64e6080c4fb3","html_url":"https://github.com/MultiQoSTechnologies/Blockchain-Transaction-Chaining","commit_stats":null,"previous_names":["rahulg2811/blockchin-representation-demo","rahulg2811/blockchin-transaction-chaining","rahulg2811/blockchain-transaction-chaining"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiQoSTechnologies%2FBlockchain-Transaction-Chaining","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiQoSTechnologies%2FBlockchain-Transaction-Chaining/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiQoSTechnologies%2FBlockchain-Transaction-Chaining/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MultiQoSTechnologies%2FBlockchain-Transaction-Chaining/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MultiQoSTechnologies","download_url":"https://codeload.github.com/MultiQoSTechnologies/Blockchain-Transaction-Chaining/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246231733,"owners_count":20744539,"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":["angular","blockchain-technology","ethereum","ganache","metamask","node-js","remix","smart-contracts","solidity","typescript","web3"],"created_at":"2024-12-10T07:08:34.033Z","updated_at":"2025-12-30T23:18:27.673Z","avatar_url":"https://github.com/MultiQoSTechnologies.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blockchain Transaction Chaining\n\nThis project demonstrates an Ethereum blockchain transaction application using Angular and Web3.js. The application allows users to:\n- Connect their Ethereum wallet\n- Perform Ethereum transactions (send ETH to another address)\n- View a visual representation of the blockchain chain with blocks, transaction details, and hashes.\n- This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.11.\n\n## Features\n\n- **Wallet Connection**: Connect to an Ethereum wallet (MetaMask or other Web3 providers).\n- **Ethereum Transactions**: Send Ethereum (ETH) from the connected wallet to a recipient address.\n- **Blockchain Chain Representation**: Display blockchain blocks in a chain format with each block containing transaction details such as transaction hash, sender (from), receiver (to), and value (ETH).\n\n## Technology Stack\n\nThe following technologies were used in this project:\n\n- **Angular**: A Frontend framework for building the user interface. Angular allows us to create dynamic web applications with a component-based architecture.\n- **Web3.js**: A JavaScript library for interacting with the Ethereum blockchain. This library lets us send transactions, interact with smart contracts, and query blockchain data directly from the web.\n- **SweetAlert2**: A Library for displaying beautiful and customizable alerts. It shows success and error notifications to the user.\n- **RxJS**: A reactive programming library that enables us to manage asynchronous operations such as HTTP requests and events in a declarative manner.\n- **MetaMask**: A browser extension that allows users to manage their Ethereum wallet and interact with decentralized applications (dApps) directly from the browser.\n- **TypeScript**: A superset of JavaScript that provides optional static typing, enhancing code quality and maintainability.\n- **Node.js**: JavaScript runtime for building scalable network applications. It’s used to run the development server and handle dependencies.\n- **Ganache**: Personal blockchain for Ethereum development used for local testing. You can use Ganache to deploy contracts and test transactions on a local network.\n\n## Prerequisites\n\nBefore you begin, ensure that you have the following installed:\n\n1. **Node.js** (version 16.x or higher) - For running the Angular development server.\n   - Download from [Node.js official website](https://nodejs.org/)\n\n2. **Angular CLI** (Command Line Interface)\n   - Install globally by running: \n     ```bash\n     npm install -g @angular/cli\n     ```\n\n3. **MetaMask** browser extension - For connecting to the Ethereum blockchain.\n   - Install from [MetaMask's website](https://metamask.io/).\n\n4. **Ganache** - Local Ethereum blockchain for development.\n   - Install from [Ganache's website](https://www.trufflesuite.com/ganache).\n\n5. **Remix IDE** - For writing and deploying Solidity smart contracts (if you're working on custom contracts).\n   - Access Remix at [Remix IDE](https://remix.ethereum.org/).\n\n## Dependencies\n\nThis project relies on the following libraries:\n\n- **@angular/core**: Provides the core functionalities for building Angular applications.\n- **web3**: JavaScript library for interacting with the Ethereum blockchain, used for sending transactions and querying blockchain data.\n- **@ensdomains/ensjs**: A library for interacting with the Ethereum Name Service (ENS), allowing users to resolve ENS names to Ethereum addresses.\n- **sweetalert2**: A library for displaying beautiful, customizable alerts and notifications within the app.\n\nThese dependencies are essential for the proper functioning of the blockchain transaction Chaining, allowing interaction with the Ethereum blockchain, transaction management, and user-friendly notifications.\n\n## Step-by-Step Guide\n\n1. **Clone the Repository**\n\n   Clone this repository to your local machine:\n\n   ```bash\n   git clone https://github.com/MultiQoSTechnologies/Blockchain-Transaction-Chaining.git\n   cd Blockchain-Transaction-Chaining\n   ```\n2. **Install Dependencies**\n\n   Run the following command to install all necessary dependencies:\n   \n   ```bash\n    npm install\n   ```\n3. **Run Ganache**\n\n   Open Ganache and start a new workspace. This will create a personal Ethereum blockchain that you can use for testing. Note the RPC URL (typically http://127.0.0.1:7545).\n\n4. **Connect MetaMask to Ganache**\n\n   Open MetaMask, and connect it to the Ganache local network using the RPC URL from step 5. Make sure you import one of the Ganache accounts with ETH to use for transactions.\n   \n5. **Write and Deploy Solidity Smart Contract (using Remix)**\n\n   1. Open [Remix IDE](https://remix.ethereum.org/).\n   2. Create a new Solidity file (e.g., TransactionContract.sol).\n   3. Write your contract code.\n   4. Compile the contract in Remix.\n   5. Deploy the contract to the Ganache network:\n       * In Remix, navigate to the \"Deploy \u0026 Run Transactions\" tab.\n       * Choose \"Injected Web3\" as the environment (this will connect Remix to MetaMask).\n       * Deploy the contract to Ganache (ensure your MetaMask is connected to the local Ganache network).\n       * After deployment, note the contract address and ABI.\n         \n6. **Update the ABI and Contract Address in Angular**\n   * After deploying the contract, you will receive the contract address (e.g., 0x123abc...).\n   * Copy the ABI (Application Binary Interface) of the contract. You can find the ABI in the Remix IDE under the \"Compilation Details\" section.\n   * In your Angular project, navigate to the file where you initialize the Web3.js connection (e.g., transection.component.ts or similar).\n   * Add the contract address and ABI to your Web3 initialization code:\n   ```bash\n    const contractAddress = '0x123abc...';  // Replace with your deployed contract address\n    const contractABI = [ /* ABI goes here */ ];\n\n    this.web3 = new Web3(window.ethereum);\n    this.contract = new this.web3.eth.Contract(contractABI, contractAddress);\n   ```\n7. **Run the Angular Development Server**\n\n   Start the Angular development server by running the following command:\n      ```bash\n   ng serve\n   ```\n   This will start the server and open the application in your browser at http://localhost:4200.\n   \n9. **Interact with the Application**\n\n  * Connect your MetaMask wallet by clicking the \"Connect Wallet\" button in the UI.\n  * Once connected, you can view your wallet address and balance.\n  * Enter a recipient address and amount of ETH to send, then click the \"Send Transaction\" button.\n  * The blockchain blocks will be displayed as a chain, showing the transaction details.\n    \n## Example Block Representation\n\nAfter sending a transaction, a typical blockchain block will be displayed in the following format:\n\n```bash\nBlock Hash: 0xabc123...\nPrevious Hash: 0xdef456...\nNext Hash: 0xghi789...\n\nTransactions:\n  - Transaction Hash: 0x123abc...\n    From: 0xabc123...\n    To: 0xdef456...\n    Value: 0.5 ETH\n```\nEach block shows the transaction details, including the transactionHash, from, to, and value (in ETH).\n\n## Troubleshooting\n* MetaMask Not Connecting: Ensure that MetaMask is properly configured and connected to the correct network (Ganache or another Ethereum network).\n* Transaction Fails: Check if the account has sufficient ETH in Ganache or MetaMask for the transaction.\n\n## DEMO  \n[![Watch the video]](https://github.com/user-attachments/assets/745cd1ba-d268-4a69-b071-84a7582b72ec)\n\n## Contributing\n\nContributions are welcome! Please fork the repository and create a pull request with your improvements.\n\n### Let Us know\nFor more details, visit [MultiQoS](https://multiqos.com/).\n\nContact us for collaboration or support:\n\nEmail: [biz@multiqos.com](https://mail.google.com/mail/?view=cm\u0026fs=1\u0026tf=1\u0026to=biz@multiqos.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiqostechnologies%2Fblockchain-transaction-chaining","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultiqostechnologies%2Fblockchain-transaction-chaining","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiqostechnologies%2Fblockchain-transaction-chaining/lists"}